轮廓:
- 属性名:outline
- 属性值:宽度 颜色 样式
- 与border类似,不同点:outline不会影响到其他元素
-
.out{ width: 100px; height: 100px; background:#bfa; outline: 10px grey solid; }
阴影:
- 属性名:box-shadow
- 属性值:向右/左偏移(+-),向下/上偏移,模糊值,阴影颜色
-
box-shadow:9px 19px 3px rgba(0, 0,0,0.2);
圆角:
- 组合属性名:border-radius
- 四个角单独属性名:
border-top-left-radius:左上 ;
border-top-right-radius: 右上;
border-bottom-right-radius:右下 ;
border-bottom-left-radius: 左下;
- 单独属性值:一个:圆角半径;两个椭圆:x半轴,y半轴
- 组合属性值:特点:对称
一个 四个角 两个 左上+右下 右上+左下 三个 左上+右下 右上 左下 四个 左上 右上 右下 左上 -
组合属性值需要椭圆角时,用/区分x半轴,y半轴