盒子边框(border)
语法
border :border-width || border-style || border-color
边框属性——设置边框样式(border-style)
边框样式用于定义页面中边框的风格,常用属性如下:
none : (默认值)即没有边框,忽略边框的宽度
solid : 边框为单实线
dashed : 边框为虚线
dotted : 边框为点线
double : 边框为双实线
表格的细线边框
语法:
table { border-collapse : collapse }
圆角边框
语法:
border-radius : 左上角 || 右上角 || 右下角 || 左下角
盒子模型
border-size : content-box 为正常盒子
border-size: border-box padding及border大小不影响盒子尺寸
盒子阴影
box-shadow : 水平距离 垂直距离 模糊距离 阴影尺寸 阴影颜色 内外阴影
盒子阴影
语法格式
box-shadow : 水平阴影 垂直阴影 模糊距离 阴影尺寸 阴影颜色 内外阴影
值 | 描述 |
---|---|
h-shadow | 必须。水平阴影的位置,允许负值 |
v-shadow | 必须,垂直阴影的位置,允许负值 |
blur | 可选。模糊距离 |
spread | 可选。阴影尺寸 |
color | 可选。阴影颜色 |
inset | 可选。将外部阴影(outset)改为内部阴影 |
- 前两个属性是必须写的。其余的可以省略
- 默认外阴影(outset)但是不能写,想要内阴影写inset