Code Better边框属性
边框
css
border: border-width border-style border-color;
border-width 边框粗细
border-style 边框形状
border-color 边框颜色
border-top 上边框
border-bottom 下边框
border-left 左边框
border-right 右边框1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
| border-style属性值 | 描述 |
|---|---|
| none | 没有边框（默认值） |
| solid | 边框为单实线（最为常用的） |
| dashed | 边框为虚线 |
| dotted | 边框为点状线 |
| double | 边框为双线 |
- 边框会额外增加盒子的实际大小。因此我们有两种方案解决：
- 测量盒子大小的时候，不量边框。
- 如果测量的时候包含了边框，则需要 width | height 减去边框宽度。
边框折叠
css
border-collapse: collapse;
它控制相邻单元格的边框，表示相邻边框合并在一起1
2
3
2
3
圆角边框
css
border-radius: num px;
1个值：应用于4个角
2个值：第一个值 应用于左上、右下 （对角）
第二个值 应用于右上、左下
3个值：第一个值 应用于 左上
第二个值 应用于 右上、左下
第三个值 应用于 右下
4个值：左上 右上 右下 左下
border-top-left-radius: num px;
border-top-right-radius: num px;
border-bottom-right-radius: num px;
border-bottom-left-radius: num px;
圆角属性特殊值
圆形 盒子宽高相同，border-radius:50%;
椭圆形 盒子宽高不同，border-radius:50%;
胶囊型 盒子宽高不同，border-radius:宽度或高度的一半;1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
盒子阴影
css
box-shadow: h-shadow v-shadow blur spread color inset;
h-shadow：必需。水平偏移量。允许负值。负值向左
v-shadow：必需。垂直偏移量。允许负值。负值向上
水平垂直偏移量设置为0px，就相当于在正上方向下照射，四周都会有阴影
blur：可选。模糊度，外延值
spread：可选。阴影扩大。
color：可选。阴影颜色。
inset：可选。将外部阴影（outset）改为内部阴影。1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
文字阴影
css
text-shadow: h-shadow v-shadow blur color;
h-shadow 必需。水平偏移量。允许负值。
v-shadow 必需。垂直偏移量。允许负值。
blur 可选。模糊度。
color 可选。阴影颜色。
注意：
阴影可以叠加设置，每组阴影取值之间以逗号隔开。1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
透明度属性
opacity
0～10完全透明 1不透明- 特点
- 给盒子设置透明度，盒子及里面的所有内容都会带有透明度。