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

---

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