本文主要是介绍自定义字体样式引入使用方法、文本阴影、边框阴影、（边框）圆角、渐变、理解重绘与回流、渐进增强和优雅降级的区别，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
目录
1、文本阴影 text-shadow
2、边框阴影 box-shadow
3、自定义字体样式方法
引入与使用方法举例：
4、（边框）圆角
5、渐变
6、过渡 transition
7、理论知识：理解重绘（/重排）与回流
8、渐进增强和优雅降级的区别
1、文本阴影 text-shadow
语法：text-shadow: h-shadow v-shadow blur color;
| 值 | 描述 |
|---|---|
| h-shadow | 必需，水平阴影的位置，允许负值。 |
| v-shadow | 必需，垂直阴影的位置，允许负值。 |
| blur | 可选，模糊的距离 |
| color | 可选，阴影的颜色 |
举例：
/*text-shadow: h-shadow(必需，水平阴影的位置，允许负值 正值阴影在右)v-shadow（必需，垂直阴影的位置） blur（阴影模糊的距离，模糊半径） color;中间用，隔开，可以加多重阴影*/.box {font-size: 50px;text-shadow: 10px 20px 4px yellow,12px 22px 5px green,14px 24px 4px pink;/* 多重阴影 */}效果：
举例：
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">.box,.box1,.box2 {margin: 0 auto;background-color: #706d6d;width: 433px;height: 200px;font-size: 50px;font-weight: 900;text-align: center;}.box {color: #000000;text-shadow: 0 2px #c5c5c5;}.box1 {color: #FFFFFF;text-shadow: -2px -1px #ADD8E6,-4px -2px #ADD8E6,-6px -3px #ADD8E6,-8px -4px #ADD8E6;}.box2 {color: #FFFFFF;text-shadow: 4px 6px #706d6d,6px 8px #FFFFFF;}</style></head><body><div class="box">称体APPLESTYLEE <br>FFECT</div><div class="box1">3D APPLE STYLE EFFECT</div><div class="box2">假边框 APPLE STYLE EFFECT</div></body>
</html>效果：
2、边框阴影 box-shadow
box-shadow 用于向方框添加阴影
语法：box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式];
| 值 | 描述 |
|---|---|
| x轴偏移量 | 必需，水平阴影的位置，允许负值。 |
| y轴偏移量 | 必需，垂直阴影的位置，允许负值。 |
| 阴影模糊半径 | 可选，模糊距离 |
| 阴影扩展半径 | 可选，阴影尺寸 |
| 阴影颜色 | 可选，阴影的颜色。省略默认为黑色 |
| 投影方式 | 可选，设置inset时为内部阴影方式，省略默认为外阴影方式 |
举例：
.box {width: 200px;height: 100px;background-color: #03b3c6;box-shadow: 10px 10px 4px 0px gray;}效果：
3、自定义字体样式方法
1、定义字体
语法：
@font-face{
font-family : 字体名称;
src : url("字体路径")
}
/* 定义字体 */@font-face {font-family: "毛体";src: url("fonts/maozedong.ttf");}2、使用字体
语法：
.box{
font-family : 字体名称;
}/* 使用字体 */.box {font-family: "毛体";font-size: 50px;}
举例：
文件层级关系：
引入与使用方法举例：
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>字体练习</title><style type="text/css">/* 字体存放文件命名应为fonts *//* 引入字体标签 */@font-face {font-family: "mfd";/* 引号内写自己命名的字体名 *//* 接下来引入字体路径 */src: url("fonts/MFDingDing_Noncommercial-Regular.otf");}/* 使用字体 不同字体间用逗号隔开 */.box {font-family: "mfd";}</style></head><body><div class="box"><p>这个世界名为元泱境界，脉（本质为振动）是构成万物的基础。每隔333年，会有一个神秘而强大的异常生物重生，它就是魁拔！魁拔的每一次出现，都会给元泱境界带来巨大的灾难！即便是天界的神族，也在劫难逃。在天地两界各种力量的全力打击下，魁拔一次次被消灭，但又总是按333年的周期重新出现。魁拔纪元1664年，天神经过精确测算后，在魁拔苏醒前一刻对其进行毁灭性打击。但谁都没有想到，由于一个差错导致新一代魁拔成功地逃脱了致命一击。很快，天界魁拔司和地界神圣联盟均探测到了魁拔依然生还的迹象。因此，找到魁拔，彻底消灭魁拔，再一次成了各地热血勇士的终极目标。</p><p>在偏远的兽国窝窝乡，蛮大人和蛮吉每天为取得象征成功和光荣的妖侠纹耀而刻苦修炼，却把他们生活的村庄搅得鸡犬不宁。村民们绞尽脑汁把他们赶走。一天，消灭魁拔的征兵令突然传到窝窝乡，村长趁机怂恿蛮大人和蛮吉从军参战。然而，在这个一切都凭纹耀说话的世界，仅凭蛮大人现有的一块冒牌纹耀，不要说参军，就连住店的资格都没有。受尽歧视的蛮吉和蛮大人决定，混上那艘即将启程去消灭魁拔的巨型战舰，直接挑战魁拔，用热血换取至高的荣誉。</p></div></body>
</html>效果：
4、（边框）圆角
语法：border-radius
| 值 | 解释 |
|---|---|
| border-radius:值； | 四个角圆角一样 |
| border-radius:值1 值2； | 值1是左上角与右下角 值2是右上角与左下角 |
| border-radius:值1 值2 值3； | 值1是左上角 值2是右上角与左下角 值3是右下角 |
| border-radius:值1 值2 值3 值4； | 值1是左上角 值2是右上角 值3是右下角 值4是左下角 |
举例：
.box{width: 200px;height: 200px;background-color: pink;border-radius: 10px; /* 四个角的圆角值是一样的 */border-radius: 10px 30px; /* 值一左上右下 值二右上左下 对角 */border-radius: 10px 25px 30px; /* 值一左上 值二右上左下 值三右 下 */border-radius: 10px 25px 30px 50px; /* 值一左上 值二右上 值三右下 值四左下 顺时针*/border-radius: 50%; /* 椭圆 */
} 5、渐变
1、线性渐变
（1）语法：
background-image : linear-gradient(方向 ， 颜色1 颜色1位置 ， ....)
（2）方向：
- 渐变角度：单位deg 例如：45deg
- to 英文单词 to right 从左向右渐变
（3）颜色位置：
- 可以是数值+单位
- 可以是 百分比
background-image: linear-gradient(45deg, red,pink);
background: linear-gradient(red 0%,pink 50%); /*image也可以省略不写*/
background-image: linear-gradient(145deg,pink,blue,pink,blue);
background-image: linear-gradient( to right, red 10px,pink 90px); /* 从左到右 */2、重复线性渐变
background-image : repeating-linear-gradient()
0%到10% 是red到 yellow ; 10%到20% 是yellow到绿; 重复五次;
background: repeating-linear-gradient(red, yellow 10%, green 20%);3、径向渐变
语法:background-image : radial-gradient(形状 半径 圆心位置，颜色1 颜色1位置 , ...)
background: radial-gradient(circle closest-corner at 40px 60px, #f00 0%,#00f 50%);值：
（1）shap 形状
- ellipse 默认 椭圆形
- circle 圆形
（2）半径 size 渐变大小
farthest-corner 默认 指定径向渐变的半径长度是从圆心到离圆心最远的角
farthest-side 指定径向渐变的半径长度是从圆心到最离圆心远的边
closest-corner 指定径向渐变的半径长度是从圆心到离圆心最近的角
closest-side 指定径向渐变的半径长度是从圆心到离圆心最近的边
（3）position 圆心位置
- at x位置 y位置
- x，y取值：数值+单位、百分比、英文单词left right center top bottom
4、重复径向渐变
语法：background-image : repeating-radial-gradient()
background: repeating-radial-gradient(circle closest-corner at top center, #f00 0%,#00f 50%);6、过渡 transition
注意：为使效果更佳，应将transition属性写在作用对象身(类)上，不要写在:horve 内
过渡属性 transition-property:过渡持续时长 transition-duration:
过渡的速度 transition-timing-function:
1、ease：（逐渐变慢）默认值，ease函数等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0).
2、linear：（匀速），linear 函数等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0).
3、ease-in：(加速)，ease-in 函数等同于贝塞尔曲线(0.42, 0, 1.0, 1.0).
4、ease-out：（减速），ease-out 函数等同于贝塞尔曲线(0, 0, 0.58, 1.0).
5、ease-in-out：（加速然后减速），ease-in-out 函数等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)
6、cubic-bezier(x1,y1,x2,y2)：（该值允许你去自定义一个时间曲线）， 特定的cubic-bezier曲线。 (x1, y1, x2, y2) 四个值特定于曲线上点P1和点P2。所有值需在[0, 1]区域内，否则无效。
过渡的延迟 transition-delay:简写：transition: all 5s ease 0s;（all意思为所有的，所有属性）
简写2（常用）transition: 0.3s;
不使用all也可定义指定属性：transition: background 0.3s;
7、理论知识：理解重绘（/重排）与回流
详细讲解重绘与回流
https://blog.csdn.net/a419419/article/details/90402561
回流：当render tree（渲染树）中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建, 这就称为回流(reflow)。每个页面至少需要一次回流，就是在页面第一次加载的时候。
重绘：在回流的时候，浏览器会使渲染树中受到影响的部分失效，并重新构造这部分渲染树，完成回流后，浏览器会重新绘制受影响的部分到屏幕中，该过程成为重绘。
回流必将引起重绘，而重绘不一定会引起回流。回流会导致渲染树需要重新计算，开销比重绘大，所以我们要尽量避免回流的产生。
8、渐进增强和优雅降级的区别
渐进增强：开始就针对低版本浏览器进行构建页面，完成基本的功能，然后再针对高级浏览器进行效果、交互、追加功能以达到更好的体验。
优雅降级：一开始就构建站点的完整功能，然后针对浏览器测试和修复。比如一开始使用 CSS3 的特性构建了一个应用，然后逐步针对各大浏览器进行 hack 使其可以在低版本浏览器上正常浏览。
区别：
优雅降级认为应该针对那些最高级、最完善的浏览器来设计网站。而将那些有功能缺失的浏览器下的测试工作安排在开发周期的最后阶段，并把测试对象限定为主流浏览器的前一个版本。在这种设计下，旧版的浏览器被认为仅能提供最简单的的浏览体验。(优先关注最高级的，再考虑兼容)
渐进增强认为应关注于内容本身。会优先考虑老版本浏览器的可用性，最后才考虑新版本的可用性，这使得渐进增强成为一种更为合理的设计范例。（先考虑兼容）
低版本用户居多，优先采用渐进增强的开发流程；如果高版本用户居多，为了提高大多数用户的使用体验，优先采用优雅降级的开发流程。不过大多数情况下都是采用渐进增强的方式，因为它更加合理。
这篇关于自定义字体样式引入使用方法、文本阴影、边框阴影、（边框）圆角、渐变、理解重绘与回流、渐进增强和优雅降级的区别的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
