css3的新增文本属性的文本阴影/换行/溢出/修饰/描边及新增渐变的线性渐变、径向渐变、重复渐变、渐变案例等：
- Ⅰ、文本属性的文本阴影：text-shadow
- Ⅱ、文本属性的文本换行：white-space
- Ⅲ、文本属性的文本溢出：text-overflow
- Ⅳ、文本属性的文本修饰：text-decoration
- Ⅴ、文本属性的文本描边：-webkit-text-stroke
- Ⅵ、新增渐变的线性渐变：linear-gradient
- Ⅶ、新增渐变的径向渐变：radial-gradient
- Ⅷ、新增渐变的重复渐变：repeating-linear-gradient、repeating-radial-gradient
- Ⅸ、渐变小案例：美术作业效果
- Ⅹ、小结：
Ⅰ、文本属性的文本阴影：text-shadow
其一、代码为：
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>01_文本阴影</title>
<style>
body {
background-color: black;
}
h1 {
font-size: 80px;
text-align: center;
color: white;
/*
text-shadow: h-shadow v-shadow blur color;
h-shadow 表示：必需。水平阴影的位置。允许负值。
v-shadow 表示：必需。垂直阴影的位置。允许负值。
blur 表示：可选。模糊的距离。
color 表示：可选。阴影的颜色。
*/
/* text-shadow: 3px 3px; */
/* text-shadow: 3px 3px red; */
/* text-shadow: 3px 3px 10px red; */
/* text-shadow: 0px 0px 15px black; */
text-shadow: 0px 0px 20px red;
font-family: '翩翩体-简';
}
</style>
</head>
<body>
<h1>红浪漫洗浴欢迎您的光临</h1>
</body>
</html>其二、结果为：
// 一进入页面后的页面：
Ⅱ、文本属性的文本换行：white-space
其一、代码为：
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>02_文本换行</title>
<style>
div {
width: 400px;
height: 400px;
border: 1px solid black;
font-size: 20px;
/*
white-space: normal|nowrap|pre|pre-line|pre-wrap|initial|inherit;
normal 表示：默认。空白会被浏览器忽略。
pre 表示：空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。
nowrap 表示：文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。
pre-wrap 表示：保留空白符序列，但是正常地进行换行。
pre-line 表示：合并空白符序列，但是保留换行符。
inherit 表示：规定应该从父元素继承 white-space 属性的值。
*/
white-space: nowrap;
}
</style>
</head>
<body>
<div>
山回路转不见君
雪上空留马行处
山回路转不见君 山回路转不见君山回路转不见君山回路转不见君山回路转不见君
雪上空留马行处
山回路转不见君
雪上空留马行处
山回路转不见君
雪上空留马行处
山回路转不见君
雪上空留马行处
山回路转不见君
雪上空留马行处
</div>
</body>
</html>其二、结果为：
// 一进入页面后的页面：
Ⅲ、文本属性的文本溢出：text-overflow
其一、代码为：
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>03_文本溢出</title>
<style>
ul {
width: 400px;
height: 400px;
border: 1px solid black;
font-size: 20px;
list-style: none;
padding-left: 0;
padding: 10px;
}
li {
margin-bottom: 10px;
/*
overflow: visible|hidden|clip|scroll|auto|initial|inherit;
visible 表示：默认值。内容不会被修剪，会呈现在元素框之外。
hidden 表示：内容会被修剪，并且其余内容是不可见的。
scroll 表示：内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto 表示：如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit 表示：规定应该从父元素继承 overflow 属性的值。
*/
overflow: hidden;
white-space: nowrap;
/*
text-overflow: clip|ellipsis|string;
clip 表示：修剪文本
ellipsis 表示：显示省略符号来代表被修剪的文本
string 表示：使用给定的字符串来代表被修剪的文本
*/
text-overflow: ellipsis;
}
</style>
</head>
<body>
<ul>
<li>焦点访谈：隐形冠军 匠心打造 分毫必争</li>
<li>我，嫁到日本才发现，女性活得真憋屈，体毛不能有，放屁也不自由</li>
<li>高洪波无缘！足协盟主热门人选曝光，3选1，冷门人物或成黑马杀出</li>
<li>《狂飙》爆火以后"疯驴子"被骂上热搜：跪着赚钱丢人吗</li>
<li>气温猛降15℃，冷空气再来袭！这些地方迎大范围降雨！"虚高"气温大跳水！！！！！</li>
</ul>
</body>
</html>其二、结果为：
// 一进入页面后的页面：
Ⅳ、文本属性的文本修饰：text-decoration
其一、代码为：
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>04_文本修饰</title>
<style>
h1 {
font-size: 100px;
/* text-decoration-line: overline; */
/* text-decoration-style: dashed; */
/* text-decoration-color: blue; */
text-decoration: overline wavy blue;
}
</style>
</head>
<body>
<h1>你好啊，欢迎来到好好学习</h1>
</body>
</html>其二、结果为：
// 一进入页面后的页面：
Ⅴ、文本属性的文本描边：-webkit-text-stroke
其一、代码为：
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>05_文本描边</title>
<style>
h1 {
font-size: 100px;
/* -webkit-text-stroke-color:red; */
/* -webkit-text-stroke-width:3px; */
/* -webkit-text-stroke-width:3px; */
/* text-stroke:3px red; */
-webkit-text-stroke:3px red;
color: transparent;
}
</style>
</head>
<body>
<h1>先生您好，欢迎光临红浪漫！</h1>
</body>
</html>其二、结果为：
// 一进入页面后的页面：
Ⅵ、新增渐变的线性渐变：linear-gradient
其一、代码为：
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>01_线性渐变</title>
<style>
.box {
width: 300px;
height: 200px;
border: 1px solid black;
float: left;
margin-left: 50px;
font-size: 20px;
}
.box1 {
background-image: linear-gradient(red,yellow,green);
}
.box2 {
background-image: linear-gradient(to right top,red,yellow,green);
}
.box3 {
background-image: linear-gradient(20deg,red,yellow,green);
}
.box4 {
background-image: linear-gradient(red 50px,yellow 100px,green 150px);
}
.box5 {
background-image: linear-gradient(20deg,red 50px,yellow 100px,green 150px);
font-size: 80px;
text-align: center;
line-height: 200px;
font-weight: bold;
color: transparent;
-webkit-background-clip: text;
}
</style>
</head>
<body>
<div class="box box1">默认情况（从上到下）</div>
<div class="box box2">通过关键词调整线性渐变渐变的方向</div>
<div class="box box3">通过角度调整线性渐变渐变的方向</div>
<div class="box box4">调整线性渐变的区域</div>
<div class="box box5">你好啊</div>
</body>
</html>其二、结果为：
// 一进入页面后的页面：
Ⅶ、新增渐变的径向渐变：radial-gradient
其一、代码为：
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>02_径向渐变</title>
<style>
.box {
width: 300px;
height: 200px;
border: 1px solid black;
float: left;
margin-left: 50px;
font-size: 20px;
margin-top: 20px;
}
.box1 {
background-image: radial-gradient(red,yellow,green);
}
.box2 {
background-image: radial-gradient(at right top,red,yellow,green);
}
.box3 {
background-image: radial-gradient(at 100px 50px,red,yellow,green);
}
.box4 {
background-image: radial-gradient(circle,red,yellow,green);
}
.box5 {
background-image: radial-gradient(200px 200px,red,yellow,green);
}
.box6 {
background-image: radial-gradient(red 50px,yellow 100px,green 150px);
}
.box7 {
background-image: radial-gradient(100px 50px at 150px 150px,red 50px,yellow 100px,green 150px);
}
</style>
</head>
<body>
<div class="box box1">默认情况</div>
<div class="box box2">通过关键词调整径向渐变圆的圆心</div>
<div class="box box3">通过像素值调整径向渐变圆的圆心</div>
<div class="box box4">通过circle关键字调整为正圆</div>
<div class="box box5">通过像素值调整为正圆</div>
<div class="box box6">调整径向渐变的区域</div>
<div class="box box7">综合写法</div>
</body>
</html>其二、结果为：
// 一进入页面后的页面：
Ⅷ、新增渐变的重复渐变：repeating-linear-gradient、repeating-radial-gradient
其一、代码为：
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>03_重复渐变</title>
<style>
.box {
width: 300px;
height: 200px;
border: 1px solid black;
float: left;
margin-left: 50px;
font-size: 20px;
}
.box1 {
background-image: repeating-linear-gradient(red 50px,yellow 100px,green 150px);
}
.box2 {
background-image: repeating-radial-gradient(red 50px,yellow 100px,green 150px);
}
</style>
</head>
<body>
<div class="box box1">重复线性渐变</div>
<div class="box box2">重复径向渐变</div>
</body>
</html>其二、结果为：
// 一进入页面后的页面：
Ⅸ、渐变小案例：美术作业效果
其一、代码为：
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>04_渐变小案例</title>
<style>
.box1 {
width: 600px;
height: 660px;
padding: 20px;
border: 1px solid black;
margin: 0 auto;
background-image: repeating-linear-gradient(transparent 0px,transparent 29px,gray 30px);
background-clip: content-box;
}
.box2 {
width: 200px;
height: 200px;
border-radius: 50%;
background-image: radial-gradient(at 80px 80px,white,#333);
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>其二、结果为：
// 一进入页面后的页面：
Ⅹ、小结：
其一、哪里有不对或不合适的地方，还请大佬们多多指点和交流！
其二、若有转发或引用本文章内容，请注明本博客地址(直接点击下面 url 跳转) https://blog.csdn.net/weixin_43405300,创作不易，且行且珍惜！
其三、有兴趣的话，可以多多关注这个专栏(Vue(Vue2+Vue3)面试必备专栏)(直接点击下面 url 跳转)：https://blog.csdn.net/weixin_43405300/category_11525646.html?spm=1001.2014.3001.5482
其四、再有兴趣的话，也可以多多关注这个专栏(Java)(直接点击下面 url 跳转)：https://blog.csdn.net/weixin_43405300/category_12654744.html?spm=1001.2014.3001.5482