1、介绍
所有HTML元素可以看作盒子,包括:
- 外边距margin
- 边框border
- 内边距(填充)padding
- 实际内容:显示文本和图像,指定元素的width和height属性实际就是内容的宽度和高度
2、边框
(1)border-style样式
none:默认无边框
dashed 虚线边框
solid 实线边框
double 两个边框
groove 3D沟槽边框
ridge 3D脊边框
inset 3D嵌入边框
outset 3D突出边框
(2)border-width宽度
(3)border-color颜色
(4)各边
border-top-style
- top上,right右,left左,bottom底
(5)简写
border:5px solid red;
- style是必须的
3、轮廓
用于绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用。
轮廓不占空间,即不会增加额外的width或者height。
- outline-color设置颜色
- outline-style设置样式
- outline-width设置宽度
4、外边距和内边距
外边距和内边距只关心尺寸大小,其设置几乎相同
- 可以设置各方向,也可以简写
- 可以使用单位,也可以使用百分比
外边距区域是透明的,而内边距区域将会受到元素背景颜色的填充
标签:style,盒子,模型,边框,width,内边,border,css,3D From: https://www.cnblogs.com/wd404/p/17332293.html