1-2-10【CSS3】CSS3的盒模型

题外话：今天也是元气满满的一天~

---

文章内容输出来源：拉勾教育大前端就业集训营

1.设置盒模型的类型

• 概述：在CSS3中，我们可以通过box-sizing属性来指定盒模型的类型，我们就可以设置如何计算一个元素的总宽度和总高度。
• 属性值：
  

content-box标准模式

• 概述：标准模式中，盒子总体大小为width(height) + padding + border，内容区域是width和height部分。
  

说明：如图所示，内容区域的宽度和高度是100px，并没有被内边距、边框和外边距占用，这是个标准的盒模型。

border-box怪异模式

• 概述：怪异模式中，盒子总体大小为width和height，添加了padding和border后，内容区域会收缩。但margin不会影响。
  

说明：如图所示，你会发现内容区域本来应该是100px的宽高，但实际上只有40px。因为内边距&边框都占用了这个区域，所以内容区域只有40px了。

2.边框圆角

• 概述：可通过设置border-radius属性，来实现矩形的圆角化。
• 属性值：可以是像素值，或者百分比。百分比参考除margin以外的盒子大小。

属性值	说明
x-radius/y-radius	/分隔两部分属性值，前面为水平半径，后面为垂直半径
radius	一个属性值，水平和垂直半径相同，得到的是一个圆角

说明：第一个盒子radius只设置了一个值，所以是以20像素为半径的圆角；第二个盒子radius设置了两个值，水平方向从20像素开始圆滑，垂直方向从50像素开始圆滑，所以是个椭圆角。

• 单一属性：

  • border-top-left-radius;左上角
  • border-top-right-radius;右上角
  • border-bottom-right-radius;右下角
  • border-bottom-left-radius;左下角

• 简写方法：

  • 概述：border-radius类似padding也可以有四种写法；
  • 4值法：左上、右上、右下、左下；
  • 3值法：左上、右上(左下)、右下；
  • 2值法：左上(右下)、右上(左下)；
  • 单值法：四个角相同。

拓展：IE8及以下的浏览器不支持border-radius属性，其他浏览器支持。

3.文字阴影

• 概述：CSS3中，text-shadow属性可向文本添加阴影。通过属性值可以规定水平阴影、垂直阴影、模糊距离，以及阴影的颜色。
• 属性值：

属性值	说明
h-shadow	必须，水平阴影的位置，可正负
v-shadow	必须，垂直阴影的位置，可正负
blur	可选，模糊的距离
color	可选，阴影的颜色

• 书写方式：

text-shadow: 3px 3px 1px red;

说明：前两个属性值必须是阴影的偏移距离，第三个属性是模糊距离，第四个属性是颜色。

说明：如图所示，四个属性值时必须按照规定书写方式书写。而三个属性值时，第三个属性值可以是颜色也可以是模糊距离。

• 多层阴影写法：

说明：若希望增加多层文字阴影，可在第一组属性值后书写逗号，然后再次增加一组属性值，直至最后一组属性值，用分号结束。

4.盒子阴影

• 概述：在CSS3中，可以通过设置box-shadow属性对盒子边框添加阴影。
• 属性值：

属性值	说明
h-shadow	必须，水平阴影的位置，可正负
v-shadow	必须，垂直阴影的位置，可正负
blur	可选，模糊的距离
spread	可选，阴影的尺寸
color	可选，阴影的颜色
inset	可选，将外部阴影改为内部阴影

说明：盒子阴影的属性值写法类似文字阴影的写法，按照顺序一个一个书写即可。

• 多层阴影：

说明：同样，多层阴影只需要在一组属性值后面添加逗号，再去书写下一组属性值即可。

前端文章汇总目录

https://www.jianshu.com/p/6d80dd616ff4

---

结束语：一花一世界，一木一浮生，愿与诸君共勉