三、圆角边框 border-radius
可以设置元素的外边框圆角
radius 半径原理:圆与边框的交集形成圆角效果
border-radius: length;
- 参数值可以是数值 或 百分比的形式
- 如果时正方形想要设置为一个圆,把数值修改为边长的一半 或 50%
- 如果想设置为圆角矩形 设置为 高度的一半
- 该属性是一个简写属性,可以跟四个值,分别依次为: 左上角 右上角 右下角 左下角 (顺时针)
四、盒子阴影 box-shadow
box-shadow: h-shadow v-shadow blur spread color inset;
值 | 描述 |
h-shadow | 必需 水平阴影的位置,允许负值 |
v-shadow | 必需 垂直阴影的位置,允许负值 |
blur | 可选 模糊距离 |
spread | 可选 阴影的尺寸 |
color | 可选 阴影的颜色 |
inset | 可选 将外部阴影改为内部阴影 |
注意:1.默认为外阴影 2.盒子阴影不占用空间,不会影响其他盒子的排列
五、文字阴影 text-shadow
text-shadow: h-shadow v-shadow blur color;