CSS中的圆角和阴影

这篇具有很好参考价值的文章主要介绍了CSS中的圆角和阴影。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

目录

盒子圆角

圆角基础使用

圆角常见使用

通过设置盒子圆角得到一个圆形

通过设置盒子圆角,得到一个“操场”的样式

盒子阴影

文字阴影


盒子圆角

圆角基础使用

在 CSS3 中,新增了圆角边框样式,这样我们的盒子就可以变圆角了。

使用border-radius属性用于设置元素的外边框圆角。

基本语法如下:

选择器 {
    border-radius: 值;  
}
  • 参数值可以为数值或百分比的形式
  • 如果是正方形,想要设置为一个圆,把数值修改为高度或者宽度的一半即可,或者直接写为 50%
  • 该属性是一个简写属性,可以跟四个值,分别代表左上角、右上角、右下角、左下角
  • 分开写:border-top-left-radiusborder-top-right-radiusborder-bottom-right-radiusborder-bottom-left-radius

示例代码:

  • 四个角等半径
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>盒子圆角</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: #0ad192;
            margin-bottom: 20px;
        }

        .round {
            width: 200px;
            height: 200px;
            background-color: #0ad192;
            /* 设置盒子圆角 */
            border-radius: 10px;
        }
    </style>
</head>

<body>
    <div></div>
    <div class="round"></div>
</body>

</html>

效果如下:

CSS中的圆角和阴影,前端基础,css,前端,html,html5,css3

  • 两个角对等半径
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>盒子圆角</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: #0ad192;
            margin-bottom: 20px;
        }

        .round {
            width: 200px;
            height: 200px;
            background-color: #0ad192;
            /* 设置盒子圆角 */
            border-radius: 10px 30px;
        }
    </style>
</head>

<body>
    <div></div>
    <div class="round"></div>
</body>

</html>

效果如下:

CSS中的圆角和阴影,前端基础,css,前端,html,html5,css3

  • 三个角半径(左上角,右上与左下角,右下角)
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>盒子圆角</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: #0ad192;
            margin-bottom: 20px;
        }

        .round {
            width: 200px;
            height: 200px;
            background-color: #0ad192;
            /* 设置盒子圆角 */
            border-radius: 10px 50px 70px;
        }
    </style>
</head>

<body>
    <div></div>
    <div class="round"></div>
</body>

</html>

效果如下:

CSS中的圆角和阴影,前端基础,css,前端,html,html5,css3

  • 四个角各不相等
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>盒子圆角</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: #0ad192;
            margin-bottom: 20px;
        }

        .round {
            width: 200px;
            height: 200px;
            background-color: #0ad192;
            /* 设置盒子圆角 */
            border-radius: 10px 30px 50px 70px;
        }
    </style>
</head>

<body>
    <div></div>
    <div class="round"></div>
</body>

</html>

CSS中的圆角和阴影,前端基础,css,前端,html,html5,css3

圆角常见使用

通过设置盒子圆角得到一个圆形

所谓圆形,放入一个正方形中就是正方形四个边均与圆相切,此时半径即为正方形每一条边长的一半

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>盒子圆角</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: #0ad192;
            margin-bottom: 20px;
        }

        .round {
            width: 200px;
            height: 200px;
            background-color: #0ad192;
            /* 设置盒子圆角 */
            /* 精确值 */
            /* border-radius: 100px; */
            /* 百分比 */
            border-radius: 50%;
        }
    </style>
</head>

<body>
    <div></div>
    <div class="round"></div>
</body>

</html>

效果如下:

CSS中的圆角和阴影,前端基础,css,前端,html,html5,css3

通过设置盒子圆角,得到一个“操场”的样式

  • 即两个半圆拼接到长方形的两个短边
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>盒子圆角</title>
    <style>
        div {
            width: 600px;
            height: 200px;
            background-color: #0ad192;
            margin-bottom: 20px;
        }

        .round {
            /* 前提为长方形 */
            width: 600px;
            height: 200px;
            background-color: #0ad192;
            /* 设置盒子圆角 */
            /* 精确值 */
            /* 设置为高度的一半长度 */
            border-radius: 100px;
        }
    </style>
</head>

<body>
    <div></div>
    <div class="round"></div>
</body>

</html>

效果如下:

CSS中的圆角和阴影,前端基础,css,前端,html,html5,css3

盒子阴影

CSS3 中新增了盒子阴影,可以使用 box-shadow 属性为盒子添加阴影。

基本语法如下:

选择器 {
    box-shadow: h-shadow v-shadow blur spread color inset;
}

属性值介绍:

属性值

描述

h-shadow

(必需值)水平阴影(horizontal shadow),可以为负值

v-shadow

(必需值)垂直阴影(vertical shadow),可以为负值

blur

(可选值)阴影模糊程度

spread

(可选值)阴影尺寸

color

(可选值)阴影颜色

inset

(可选值)将外(盒子的背面)阴影改为内(盒子之上)阴影

注意

  1. 默认的是外阴影(outset) ,但是不可以显式写这个单词,否则造成阴影无效
  2. 盒子阴影不占用空间,不会影响其他盒子排列。

示例代码:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>盒子阴影</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: #0ad192;
            margin-bottom: 20px;
        }

        .shadow {
            width: 200px;
            height: 200px;
            background-color: #0ad192;
            /* 设置盒子阴影 */
            box-shadow: 0px 5px 10px 10px rgba(0, 0, 0, 0.2);
        }
    </style>
</head>

<body>
    <div></div>
    <div class="shadow"></div>
</body>

</html>

效果如下:

CSS中的圆角和阴影,前端基础,css,前端,html,html5,css3

文字阴影

在 CSS3 中,可以使用 text-shadow 属性将阴影应用于文本

基本语法如下:

选择器 {
    text-shadow: h-shadow v-shadow blur color;
}

属性值介绍:

属性值

描述

h-shadow

(必需值)水平阴影(horizontal shadow),可以为负值

v-shadow

(必需值)垂直阴影(vertical shadow),可以为负值

blur

(可选值)阴影模糊程度

color

(可选值)阴影颜色

示例代码:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文本阴影</title>
    <style>
        span {
            font-size: 100px;
            color: red;
            text-shadow: 2px 10px 2px rgba(0, 0, 0, 0.5);
        }
    </style>
</head>

<body>
    <span>文本阴影</span>
</body>

</html>

效果如下:

CSS中的圆角和阴影,前端基础,css,前端,html,html5,css3文章来源地址https://www.toymoban.com/news/detail-861432.html

到了这里,关于CSS中的圆角和阴影的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • h5(html5)+css3前端笔记二

    一、表格标签 表格的主要作用: 表格主要用于 显示、展示数据 ,因为它可以让数据显示的非常的规整,可读性非常好。特别是后台展示数据的时候,能够熟练运用表格就显得很重要。一个清爽简约的表格能够把繁杂的数据表现得很有条理。 1. table/table 用来定义表格的标签

    2024年02月14日
    浏览(60)
  • 前端开发基础(HTML5 + CSS3)【第一篇】:HTML标签之文字排版、图片、链接、音频、视频 && 涵盖了两个综合案例 做到了基础学得会,实战写的出

    点击前往前端开发基础专栏: 一、开发环境搭建 这里google浏览器不能用我们就使用电脑自带的微软浏览器就可以了! 下载 VS Code VS Code 官网下载地址 这里根据自己电脑的操作系统进行下载! 安装步骤如下: (是在不知道如何操作,可以找个教程一步一步来) 安装这个还是

    2024年04月16日
    浏览(61)
  • HTML5+CSS3+移动web 前端开发入门笔记(二)HTML标签详解

    排版标签用于对网页内容进行布局和样式的调整。下面是对常见排版标签的详细介绍: 标题使用至标签进行定义。定义最大的标题,定义最小的标题。具有align属性,属性值可以是:left、center、right。 将给定的HTML代码转换为Markdown格式的标题标签如下所示: 效果演示: H3:

    2024年02月07日
    浏览(65)
  • [HTML]Web前端开发技术7(HTML5、CSS3、JavaScript )CSS的定位机制——喵喵画网页

    希望你开心,希望你健康,希望你幸福,希望你点赞! 最后的最后,关注喵,关注喵,关注喵,佬佬会看到更多有趣的博客哦!!! 喵喵喵,你对我真的很重要! 目录 前言 CSS的定位机制 文档流定位 元素类型   浮动定位 float的用处 float的特点 clear属性 层定位 position属性

    2024年02月05日
    浏览(69)
  • 网页设计(八)HTML5基础与CSS3应用

    当当网企业用户注册页面 改版后当当网企业用户注册页面 验证码 HTML5新增加结构元素设计布局页面 HAB公司行业案例局部初始页面 HAB公司行业案例局部鼠标盘旋时特效页面 鼠标盘旋时指向“查看更多”时超链接效果 文字素材: “服务浦东政务”“HAB公司连续多年保持政务信

    2024年01月17日
    浏览(55)
  • [HTML]Web前端开发技术9(HTML5、CSS3、JavaScript )——喵喵画网页

    希望你开心,希望你健康,希望你幸福,希望你点赞! 最后的最后,关注喵,关注喵,关注喵,佬佬会看到更多有趣的博客哦!!! 喵喵喵,你对我真的很重要! 目录 前言 CSS颜色与背景 颜色color属性 背景background属性 1. 背景颜色background-color 2. 背景图像background-image 3. 背景

    2024年02月03日
    浏览(73)
  • [HTML]Web前端开发技术12(HTML5、CSS3、JavaScript )——喵喵画网页

    希望你开心,希望你健康,希望你幸福,希望你点赞! 最后的最后,关注喵,关注喵,关注喵,佬佬会看到更多有趣的博客哦!!! 喵喵喵,你对我真的很重要! 目录 前言 网页标题:三列自适应宽度 网页标题:多行三列自适应宽度 一级水平导航菜单:采用“无序列表+超

    2024年01月16日
    浏览(73)
  • CSS中的圆角和阴影

    目录 盒子圆角 圆角基础使用 圆角常见使用 通过设置盒子圆角得到一个圆形 通过设置盒子圆角,得到一个“操场”的样式 盒子阴影 文字阴影 在 CSS3 中,新增了圆角边框样式,这样我们的盒子就可以变圆角了。 使用 border-radius 属性用于设置元素的外边框圆角。 基本语法如下

    2024年04月28日
    浏览(38)
  • web前端大作业_Html5+CSS3+JS原生项目_京东商城首页 详细代码

    index.html css index.css js index.js 效果图如下:            

    2024年02月11日
    浏览(58)
  • [HTML]Web前端开发技术8(HTML5、CSS3、JavaScript )CSS样式属性,withborder,italic | oblique,indent,padding,——喵喵画网页

    希望你开心,希望你健康,希望你幸福,希望你点赞! 最后的最后,关注喵,关注喵,关注喵,佬佬会看到更多有趣的博客哦!!! 喵喵喵,你对我真的很重要! 目录 前言 CSS属性值中的单位 CSS字体样式 font-size设置字号 字体样式font-style属性 字体系列font-family属性 字体变体

    2024年02月04日
    浏览(69)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包