文章目录
- 一、文本阴影
- 二、盒子阴影
- 三、边框圆角弧度border-radius
一、文本阴影
text-shadow:0px -10px 1px red,0px 10px 1px yellow;
参数:水平方向阴影位移 垂直方向阴影位移 模糊程度 阴影颜色
支持多参数
二、盒子阴影
box-shadow:10px 10px 5px 10px blue inset;
参数:水平方向阴影位移 垂直方向阴影位移 模糊距离 阴影大小 阴影颜色 内阴影
模糊距离 阴影大小 阴影颜色 内阴影 均为可选参数
内阴影,一般不用,可不加
三、边框圆角弧度border-radius
border-radius:10px;
px 或者 百分比
v1 四个角一样
v1,v2 左上右下,左下右上
v1,v2,v3 左上,左下右上,右下
v1,v2,v3,v4 左上,右上,右下,左下 顺时针
拆分属性:
border-top-left-radius:10px 左上
border-bottom-left-radius:20px 左下
border-top-right-radius:10px 右上
border-bottom-right-radius:20px 右下
特殊用法:
border-radius:30/60px;水平方向走30px,垂直方向走60px
border-radius:10px 20px 30px 40px/50px 60px 70px 80px; 各个角度不一样
常用用法:
border-radius:50%;对于正方形设置50%为圆,不需要去计算长度了
border-radius:20px;设置长方向的边角弧度时设置固定值。