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
等指定圆角时,分别设定水平半径和垂直半径,用空格
隔开。