css的一些基础属性——圆角边框和阴影

目录

四.圆角边框和阴影

圆角边框

效果展示：

盒子阴影

效果展示：

谢谢观看！！！我们下期再见！！！

---

四.圆角边框和阴影

圆角边框

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

语法：

div {
 border-radius:10px;
}

border-radius半径原理：圆与边框的交集形成圆角效果

注：

• 参数可以时数值或百分比
• 如果是一个正方向想设置为一个圆，把数值修改为高度或宽度的一半即可，或改为50%
• 如果是一个矩形则设置为高度的一半即可
• 该属性是一个简写属性，可以给四个角分别设置：左上角，左下角，右上角，右下角
• 可以分开写：border-top-left-radius：10px； 等等     顺序不可导

效果展示：

---

盒子阴影

css3中型增加了盒子/文本阴影，我们可以使用box/text-sahdow定义阴影属性

语法：

div {
 box-shadow: h-shadow v-shadow blur spread color inset ;
}

例如：

div {
 box-shadow: 10px 10px 10px 10px red;
}

属性代表的意义

属性值	描述
h-shadow	必须；水平阴影位置。允许为负值
v-shadow	必须；垂直阴影位置。允许为负值
blur	可选；模糊距离（阴影清晰度）越小越清晰
spred	可选；阴影尺寸。允许为负值
color	阴影颜色
inset	可选；将外部阴影（outset）改为内部阴影

注：

默认的是外部阴影，但是不可以写这个词否则代码无效

盒子阴影不占用空间，不会影响其他盒子排列

效果展示：

---

谢谢观看！！！我们下期再见！！！