题外话：今天也是元气满满的一天~
文章内容输出来源：拉勾教育大前端就业集训营
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
结束语：一花一世界，一木一浮生，愿与诸君共勉
网友评论