边框
border: 1px solid red;
线宽度 线型 线的颜色
线型:solid --实线
dashed--虚线
dotted--点状线
小属性 | 意义 |
border-width | 线宽 |
border-style | 线型 |
border-color | 线颜色 |
去掉边框 border:none
圆角
1、border-radius属性的值通常为px单位,表示圆角的半径
border-radius:10px
border-radius:宽度的一半,则为正圆形
2、单独设置四个圆角
border-radius属性可以单独设置四个圆角
border-radius:10px 20px 30px 40px;
左上角 右上角 右下角 左下角
注意:小属性,小属性是为了层叠大属性
3、百分比为单位
border-radius属性的值也可以用百分比做单位,表示圆角起始于每条边的哪里
正方形盒子如果设置的border-radius属性为50%,就是正圆形
长方形盒子如果设置的border-radius属性为50%,就是椭圆形
注意:
border-radius:左上角、右下角/右上角、左下角(两个值)
border-radius:左上角 右上角/左下角 右下角(三个值)
border-radius:左上角 右上角 右下角 左下角(四个值)
盒子阴影
1、box-shadow: 10px 20px 30px rgba(0,0,0,.4);
x偏移 y偏移 模糊量 颜色
2、阴影延展--同时向四个方向进行延展
box-shadow: 10px 20px 30px 40px rgba(0,0,0,.4);
x偏移 y偏移 模糊量 阴影延展 颜色
3、内阴影
box-shadow属性值前面加inset单词,表示内阴影
box-shadow: inset 10px 20px 30px 40px rgba(0,0,0,.4);
内阴影 x偏移 y偏移 模糊量 阴影延展 颜色
多阴影