1、盒子大小
默认情况下,盒子可见框的大小由内容区、内边距和边框共同决定
box-sizing用来设置盒子尺寸的计算方式(设置width和height的作用)
可选值:
content-box默认值,宽度和高度用来设置内容区的大小border-box宽度和高度用来设置整个盒子可见框的大小
2、轮廓
outline用来设置元素的轮廓线,用法和border一模一样
轮廓和边框不同点是,轮廓线不会占据空间
3、阴影
box-shadow 用来设置元素的阴影效果,阴影不会影响页面布局
语法:
box-shadow: h-shadow v-shadow blur spread color inset;
| 值 | 描述 |
|---|---|
| h-shadow | 必需。水平阴影的位置。允许负值。 |
| v-shadow | 必需。垂直阴影的位置。允许负值。 |
| blur | 可选。模糊距离。 |
| spread | 可选。阴影的尺寸。 |
| color | 可选。阴影的颜色。 |
| inset | 可选。将外部阴影 (outset) 改为内部阴影。 |
阴影示例
4、圆角
border-radius 用来设置圆角,圆角设置的是圆的半径大小
border-top-left-radius、border-top-right-radius、border-bottom-left-radius、border-bottom-right-radius 分别设置四个角
border-radius 可以分别指定四个角的圆角
- 四个值:
左上右上右下左下 - 三个值:
左上右上/左下右下 - 两个值:
左上/右下右上/左下 - 一个值:
左上/右上/右下/左下
椭圆圆角:
使用border-radius指定四个角的圆角时,分别设定水平半径和垂直半径,用/隔开。
使用border-top-left-radius等指定圆角时,分别设定水平半径和垂直半径,用空格隔开。










