在css3中如何添加圆角边框、盒子阴影以及文字阴影

注:在css3中如何添加圆角边框、盒子阴影以及文字阴影

一、圆角边框

在 CSS3 中,新增了圆角边框样式这样我们的盒子就可以变圆角了。
border-radius 属性用于设置元素的外边框圆角。
语法:

复制代码
border-radius:length;
  • 参数值可以为数值或百分比的形式

  • 如果是正方形,想要设置为一个圆,把数值修改为高度或者宽度的一半即可,或者直接写为 50%

  • 该属性是一个简写属性,可以跟四个值,分别代表左上角、右上角.右下角、左下角

  • 分开写:border-top-left-radius、border-top-right-radius、 border-bottom-right-radius 和border-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>Document</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: aquamarine;
            border-radius: 100px;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

二、盒子阴影

CSS3 中新增了盒子阴影,我们可以使用 box-shadow 属性为盒子添加阴景乡。
语法:

复制代码
box-shadow:h-shadowv-shadow blurspread  color inset;

|--------------|-----------------------------|
| | 描述 |
| h-shadow | 必需。水平阴影的位置,允许负值 |
| v-shadow | 必需。垂直阴影的位置。允许负值 |
| blur | 可选。模糊距离。 |
| spread | 可选。阴影的尺寸。 |
| color | 可选。阴影的颜色。请参考css的颜色值。 |
| inset | 可选。将外部阴影(outset)改为内部阴影。 |

注意:

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>Document</title>
    <style>
        div{
            width: 300px;
            height: 300px;
            background-color: #fed8d8;
            border: 1px solid  firebrick;
            box-shadow: 0px  8px  15px  10px  rgb(0, 0, 0);
            /* inset 可选。将外部阴影改为内部阴影 */
            /* spread 可选阴影范围(调整大小) */
            /* blur 可选模糊距离 */
            /* v-shadow 必需,垂直的阴影的位置,允许负值 */
            /* h-shadow 必需,水平阴影的位置,允许负值 */
            
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

三、文字阴影

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

语法:

复制代码
text-shadow: h-shadow v-shadow blur color;
text-shadow: 水平位置 垂直位置 模糊距离(大糊小清) 阴影的颜色

|--------------|------------------------|
| | 描述 |
| h-shadow | 必需。水平阴影位置。允许负值 |
| v-shadow | 必需。垂直阴影的位置。允许负值 |
| blur | 可选。模糊的U距离 |
| color | 可选。阴影的颜色。参阅css的颜色值 |

案例:

复制代码
<style>
        div{
            font-size: 20px;
            font-weight: 10px;
            text-shadow: 20px  10px   6px   gold;
     /* text-shadow: 水平位置  垂直位置  模糊距离(大糊小清) 阴影的颜色; */
     
        }
    </style>
相关推荐
慧一居士31 分钟前
flex 布局完整功能介绍和示例演示
前端
DoraBigHead33 分钟前
小哆啦解题记——两数失踪事件
前端·算法·面试
陈洪奇6 小时前
注册中心学习笔记整理
笔记·学习
一斤代码6 小时前
vue3 下载图片(标签内容可转图)
前端·javascript·vue
中微子6 小时前
React Router 源码深度剖析解决面试中的深层次问题
前端·react.js
光影少年6 小时前
从前端转go开发的学习路线
前端·学习·golang
中微子7 小时前
React Router 面试指南:从基础到实战
前端·react.js·前端框架
3Katrina7 小时前
深入理解 useLayoutEffect:解决 UI "闪烁"问题的利器
前端·javascript·面试
前端_学习之路8 小时前
React--Fiber 架构
前端·react.js·架构
伍哥的传说8 小时前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js