CSS3浅析
CSS3简介
CSS3 是层叠样式表（Cascading Style Sheets）语言的最新版本，旨在扩展CSS2.1。
是CSS技术的升级版本，CSS3语言开发是朝着模块化发展的。以前的规范作为一个模块实在是太庞大而且比较复杂，所以，把它分解为一些小的模块，更多新的模块也被加入进来。这些模块包括： 盒子模型、列表模块、超链接方式 、语言模块 、背景和边框 、文字特效 、多栏布局等。
CSS3
文本样式
text-overflow
属性确定如何向用户发出未显示的溢出内容信号。它可以被剪切，显示一个省略号，或显示一个自定义字符串。
属性值
-
clip：这个关键字的意思是"在内容区域的极限处截断文本"，因此在字符的中间可能会发生截断。为了能在两个字符过渡处截断，你必须使用一个空字符串值''。此为默认值。 -
ellipsis：这个关键字的意思是“用一个省略号 (…)来表示被截断的文本”。这个省略号被添加在内容区域中，因此会减少显示的文本。如果空间太小到连省略号都容纳不下，那么这个省略号也会被截断。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="./css/breakout1.css">
<title>Document</title>
<style>
p {
font-family: sans-serif;
width: 200px;
border: 1px solid;
padding: 2px 5px;
/*
***************文本溢出需要以下两种方法 ***************
*/
white-space: nowrap;
overflow: hidden;
}
.overflow-visible {
white-space: initial;
}
.overflow-clip {
text-overflow: clip;
}
.overflow-ellipsis {
text-overflow: ellipsis;
}
.overflow-string {
/* Not supported in most browsers,
see the 'Browser compatibility' section below */
text-overflow: " [..]";
}
.overflow-clip-cn {
text-overflow: clip;
}
.overflow-ellipsis-cn {
text-overflow: ellipsis;
}
</style>
</head>
<body>
<p class="overflow-visible">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p><code>.overflow-visible {white-space: initial}</code>
<p class="overflow-clip">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p><code>.overflow-clip {text-overflow: clip}</code>
<p class="overflow-ellipsis">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p><code>.overflow-ellipsis {text-overflow: ellipsis}</code>
<p class="overflow-string">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p><code>.overflow-string {text-overflow: "[..]"}</code>
<hr>
<p class="overflow-clip-cn">溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出</p><code>.overflow-clip {text-overflow: clip}</code>
<p class="overflow-ellipsis-cn">溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出</p><code>.overflow-ellipsis {text-overflow: ellipsis}</code>
</body>
</html>
word-wrap
word-wrap 属性原本属于微软的一个私有属性，在 CSS3 现在的文本规范草案中已经被重名为
overflow-wrap。 word-wrap 现在被当作 overflow-wrap 的 “别名”。 稳定的谷歌 Chrome 和 Opera 浏览器版本支持这种新语法。
overflow-wrap 是用来说明当一个不能被分开的字符串太长而不能填充其包裹盒时，为防止其溢出，浏览器是否允许这样的单词中断换行。
属性值
- normal：表示在正常的单词结束处换行
- break-word：表示如果行内没有多余的地方容纳该单词到结尾，则那些正常的不能分割的单词会被强制换行
word-break
CSS 属性 word-break 指定了怎样在单词内断行。
- normal 使用浏览器默认的换行规则。
- break-all 允许在单词内换行
- keep-all 只能在半角空格或连字符处换行
white-space
white-space CSS 属性是用来设置如何处理元素中的空白。
属性值
-
normal
连续的空白符会被合并，换行符会被当作空白符来处理。填充line盒子时，必要的话会换行。 -
nowrap
和 normal 一样，连续的空白符会被合并。但文本内的换行无效。 -
pre
连续的空白符会被保留。在遇到换行符或者<br>元素时才会换行。 -
pre-wrap
连续的空白符会被保留。在遇到换行符或者<br>元素，或者需要为了填充line盒子时才会换行。 -
pre-line
连续的空白符会被合并。在遇到换行符或者<br>元素，或者需要为了填充line盒子时会换行
<body>
<style>
p {
width: 1500px;
background-color: gold;
}
.normal {
white-space: normal
}
.pre {
white-space: pre;
}
.nowrap {
white-space: nowrap
}
.pre-nowrap {
white-space: pre-wrap;
}
.pre-line {
white-space: pre-line;
}
</style>
<code>normal</code>
<p class="normal"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<hr>
<code>pre</code>
<p class="pre"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<hr>
<code>nowrap</code>
<p class="nowrap"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<hr>
<code>pre-nowrap</code>
<p class="pre-nowrap"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<hr>
<code>pre-line</code>
<p class="pre-line"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<hr>
</body>
text-shadow
text-shadow为文字添加阴影。可以为文字与 text-decorations 添加多个阴影，阴影值之间用逗号隔开。
属性值
-
offset-x，offset-y
必选。这些长度值指定阴影相对文字的偏移量。<offset-x>指定水平偏移量，若是负值则阴影位于文字左边。<offset-y>指定垂直偏移量，若是负值则阴影位于文字上面。如果两者均为0，则阴影位于文字正后方（如果设置了<blur-radius>则会产生模糊效果)。可用单位请查看<length>。 -
color：可选。可以在偏移量之前或之后指定。如果没有指定颜色，则使用UA（用户代理）自行选择的颜色。 -
blur-radius：可选。这是<length>值。如果没有指定，则默认为0。值越大，模糊半径越大，阴影也就越大越淡（wider and lighter）。
text-shadow: 颜色(Color) x轴(X Offset) y轴(Y Offset) 模糊半径(Blur)
text-shadow: x轴(X Offset) y轴(Y Offset) 模糊半径(Blur) 颜色(Color)
<body>
<style>
* {
margin: 0;
padding: 0;
}
p {
text-align: center;
color: #352995;
font: 1.2em Georgia,serif;
width: 550px;
margin: 0 auto;
padding-bottom: 80px;
}
.one {
text-shadow: 1px 1px 2px pink;
}
.two {
text-shadow: 1px 0 10px #FFCC00;
}
.three {
text-shadow: 5px 5px #558ABB;
}
.four {
text-shadow: 2px 5px red;
}
.five {
text-shadow: 1px 1px 2px red,0 0 1em blue,0 0 .2em blue;
}
.seven {
text-shadow: 0 0 5px #fff,0 0 10px #fff,0 0 40px #ff00de,0 0 70px #ff00de;
}
.eight {
text-shadow: -1px -1px 0 #fff,1px 1px 0 #333,1px 1px 0 #444;
}
</style>
<div>
<p class="one">Far out in the uncharted backwaters of the unfashionable end of the western spiral arm of the Galaxy...</p>
<p class="two">Far out in the uncharted backwaters of the unfashionable end of the western spiral arm of the Galaxy...</p>
<p class="three">Far out in the uncharted backwaters of the unfashionable end of the western spiral arm of the Galaxy...</p>
<p class="four">Far out in the uncharted backwaters of the unfashionable end of the western spiral arm of the Galaxy...</p>
<p class="five">Far out in the uncharted backwaters of the unfashionable end of the western spiral arm of the Galaxy...</p>
<p class="six">Far out in the uncharted backwaters of the unfashionable end of the western spiral arm of the Galaxy...</p>
<p class="seven">Far out in the uncharted backwaters of the unfashionable end of the western spiral arm of the Galaxy...</p>
<p class="eight">Far out in the uncharted backwaters of the unfashionable end of the western spiral arm of the Galaxy...</p>
</div>
</body>
example
border-radius
border-radius 允许你设置元素的外边框圆角。当使用一个半径时确定一个圆形，当使用两个半径时确定一个椭圆。这个(椭)圆与边框的交集形成圆角效果。
<body>
<style>
.container {
margin-left: 620px;
}
.container , .container2 {
width: 300px;
float: left;
}
.container div , .container2 div {
margin: 0 auto;
padding-top: 1px;
width: 200px;
height: 120px;
background-color: #5b6dcd;
margin-bottom: 30px;
text-align: center;
font-size: 14px;
}
p {
font-family: sans-serif;
margin-top: 50px;
color: #0ee7ff;
}
.one {
border-radius: 30px;
}
.two {
border-radius: 25% 10%;
}
.three {
border-radius: 10% 30% 50% 70%;
}
.four {
border-radius: 10% / 50%;
}
.five {
border-radius: 10px 100px / 120px;
}
.six {
border-radius: 50% 20% / 10% 40%;
}
.semicircle {
width: 120px;
height: 60px;
border-radius: 120px 120px 0 0;
}
.seven {
border-radius: 1em/5em;
/*
等价于
border-top-left-radius: 1em 5em;
border-top-right-radius: 1em 5em;
border-bottom-right-radius: 1em 5em;
border-bottom-left-radius: 1em 5em;
*/
}
.eight {
border-radius: 110px 85px 105px 80px / 45px 30px 30px 20px;
/*
等价于
border-top-left-radius: 110px 45px;
border-top-right-radius: 85px 30px;
border-bottom-right-radius: 105px 30px;
border-bottom-left-radius: 80px 20px;
*/
}
</style>
<div class="container">
<div class="one"><p>border-radius: 30px;</p></div>
<div class="two"><p>border-radius: 25% 10%;</p></div>
<div class="three"><p>border-radius: 10% 30% 50% 70%;</p></div>
<div class="four"><p>border-radius: 10% / 50%;</p></div>
<div class="five"><p>border-radius: 10px 100px / 120px;</p></div>
</div>
<div class="container2">
<div class="six"><p>border-radius: 50% 20% / 10% 40%;</p></div>
<div class="semicircle"><p>border-radius: 120px 120px 0 0</p></div>
<div class="seven"><p>border-radius: 1em/5em;</p></div>
<div class="eight"><p>border-radius: 110px 85px 105px 80px / 45px 30px 30px 20px;</p></div>
</div>
</body>
border-image
border-imageCSS属性允许在元素的边框上绘制图像。这使得绘制复杂的外观组件更加简单，也不用在某些情况下使用九宫格了。使用 border-image 时，其将会替换掉 border-style 属性所设置的边框样式。虽然规范要求使用 border-image 时边框样式必须存在，但一些浏览器可能没有实现这一点。
特别注意，若 border-image-source（此值可用border-image-source或border-image设置) 的值为 none 或者图片不能显示，则将应用 border-style。
MDN例子：
#bitmap {
width: 200px;
border: 30px solid transparent;
padding: 20px;
border-image: url("https://mdn.mozillademos.org/files/4127/border.png") 30;
}
属性
-
source
border-image-source:url(image url);图片来源 -
repeat
三种repeat方式-
stretch 压缩或伸展border-image的背景图片以其刚好适应border-width的宽度
-
repeat 简单的重复
-
round 压缩或伸展border-image的背景图片以图片最小单元刚好适应border-width的宽度，在此基础上重复
-
-
outset
边框图像区域超出边框的量 -
slice
border-image-slice: number|%|fill;
此属性指定顶部，右，底部，左边缘的图像向内偏移，分为九个区域：四个角，四边和中间。图像中间部分将被丢弃（完全透明的处理），除非填写关键字。如果省略第四个数字/百分比，它和第二个相同的。如果也省略了第三个，它和第一个是相同的。如果也省略了第二个，它和第一个是相同的。-
数字：数字表示图像的像素（位图图像）或向量的坐标（如果图像是矢量图像）
-
百分比：百分比图像的大小是相对的：水平偏移图像的宽度，垂直偏移图像的高度
-
fill：保留图像中间部分
-
MDN例子：
#bitmap {
width: 300px;
border: 30px solid;
border-image: linear-gradient(red, yellow) 15;
padding: 20px;
}
box-shadow
box-shadow 以由逗号分隔的列表来描述一个或多个阴影效果。该属性可以让几乎所有元素的边框产生阴影。如果元素同时设置了 border-radius ，阴影也会有圆角效果。多个阴影的z-ordering 和多个 text shadows 规则相同(第一个阴影在最上面)。
box-shadow: inset x-offset y-offset blur-radius spread-radius color
属性值
-
inset
不使用inset，默认阴影在边框外，即阴影向外扩散。
使用 inset 后，阴影在边框内（即使是透明边框），即阴影向内扩散，背景之上内容之下。 -
<offset-x> <offset-y>
这是头两个<length>值，用来设置阴影偏移量。x,y 是按照数学二维坐标系来计算的，只不过y垂直方向向下。<offset-x>设置水平偏移量，正值阴影则位于元素右边，负值阴影则位于元素左边。<offset-y>设置垂直偏移量，正值阴影则位于元素下方，负值阴影则位于元素上方。可用单位请查看<length>。
如果两者都是0，那么阴影位于元素后面。这时如果设置了<blur-radius> 或<spread-radius> 则有模糊效果。需要考虑 inset -
<blur-radius>
这是第三个<length>值。值越大，模糊面积越大，阴影就越大越淡。 不能为负值。默认为0，此时阴影边缘锐利。需要考虑inset -
<spread-radius>
这是第四个<length>值。取正值时，阴影扩大；取负值时，阴影收缩。默认为0，此时阴影与元素同样大。需要考虑inset
指定单个 box-shadow 的用法：
- 给出两个、三个或四个数字值的情况。
- 如果只给出两个值, 这两个值将被浏览器解释为x轴上的偏移量
<offset-x>和y轴上的偏移量<offset-y>。- 如果给出了第三个值, 这第三个值将被解释为模糊半径的大小
<blur-radius>- 如果给出了第四个值, 这第四个值将被解释为扩展半径的大小
<spread-radius>- 可选， 插页(阴影向内)
inset- 可选， 颜色值
<color>
声明多个shadows时， 用逗号将shadows隔开。
<body>
<style>
div {
margin: 0 auto;
text-align: center;
margin-bottom: 50px;
width: 350px;
height: 100px;
border: 2px solid black;
}
.shadow1 {
box-shadow: 10px 5px 5px red;
}
.shadow2 {
box-shadow: 60px -16px teal;
}
.shadow3 {
box-shadow: 12px 12px 2px 1px rgba(0, 0, 255, .2);
}
.shadow4 {
box-shadow: inset 3em 2em gold;
}
.shadow5 {
box-shadow: 17px 16px red, -8em 80px 1.4em olive;
}
</style>
<div class="shadow1">
<p>box-shadow: 10px 5px 5px red;</p>
</div>
<div class="shadow2">
<p> box-shadow: 60px -16px teal;</p>
</div>
<div class="shadow3">
<p>box-shadow: 12px 12px 2px 1px rgba(0, 0, 255, .2);</p>
</div>
<div class="shadow4">
<p>box-shadow: inset 3em 2em gold;</p>
</div>
<div class="shadow5">
<p>box-shadow: 17px 16px red, -8em 80px 1.4em olive;</p>
</div>
</body>
box-sizing
box-sizing属性用于更改用于计算元素宽度和高度的默认的 CSS 盒子模型。可以使用此属性来模拟不正确支持CSS盒子模型规范的浏览器的行为。
属性
以下说明的盒子不包括margin（外边距）
-
content-box，默认值，标准盒子模型。假设一个元素的宽为100px，指的是这个元素的content width（内容块）为100px，不包括padding（内边距），border（边框）。计算这个盒子最终width = content width + padding*2 + border*2 -
border-box，此值下，设置一个元素的宽为100px，指的是这个元素的content width + padding + border的宽度为100px，已经包括了padding（内边距），border（边框）的宽度。
PS：因为padding和border也分左右上下，需要时记得x2
- 左图使用标准盒模型，无
padding和border，刚好填充父元素。 - 中图使用标准盒模型，
width:100%只是content区的100%，由于有了padding和border，自然而然会被”挤“出来。 - 右图使用border-box，
width:100%已包括了padding与border，所以不管padding和border设置多大值，只会往内挤。
box-sizing
background-size 设置背景图片大小。图片可以保有其原有的尺寸，或者拉伸到新的尺寸，或者在保持其原有比例的同时缩放到元素的可用空间的尺寸。
属性值
- <length>：指定背景图片大小，不能为负值。
-
<percentage>：指定背景图片相对背景区的百分比。背景区由
background-origin设置，默认为盒模型的内容区与内边距，也可以设置为只有内容区，或者还包括边框。如果attachment为fixed，背景区为浏览器可视区（即视口），不包括滚动条。不能为负值。 - auto：以背景图片的比例缩放背景图片
-
cover：缩放背景图片以完全覆盖背景区，可能背景图片部分看不见。和
contain相反，cover值尽可能大的缩放图片并保持图像的宽高比例（图片不会被压扁）。该背景图以它的全部宽或者高覆盖所在容器。当容器和背景图大小不同时，背景图的左/右或者上/下部分会被裁剪。 - contain：缩放背景图片以完全装入背景区，可能背景曲部分空白。
当通过宽度和高度值来设定尺寸时，你可以提供一或者两个数值:
- 如果仅有一个数值被给定，这个数值将作为宽度值大小，高度值将被设定为
auto- 如果有两个数值被给定，第一个将作为宽度值大小，第二个作为高度值大小。
逐一分析。
auto
- 当长宽均为auto时。
background-size: auto;
此时，图片宽度为auto，但是高度不为auto，或者说，高度是被迫的被设置为auto，参考之前说明。
如果仅有一个数值被给定，这个数值将作为宽度值大小，高度值将被设定为auto
由于图片大小小于box大小，默认情况下会repeat图片使得铺满整个box，若要图片不重复，可使用background-repeat属性。
background-repeat: no-repeat;
使用background-position属性也可以移动图片相对于box的初始位置，这个初始位置由background-origin定义的。
此时，若box大小减小，图片不会缩小。
对于比例不一致的图片呢？
box缩小前
box缩小后
情况是一致的。
接下来讨论一下有两个值，且一个为auto，另一个不为空值的情况。
宽度设为100px，高度自动，此时背景图片会根据宽度的值和图片比例计算出高度的值并应用。
200x200px的图片因为1:1的宽高比，高度自然得出100px。
而对于不同比例，简单计算一下就好。
160 : 200 = 100 : y，数数格子就能验证了。
这里要注意，如果使用百分数设置，百分数计算对应的不是图片的尺寸，而是容器的尺寸。
background-size: 50% 30%;
这张图是以
size：50% 30%为参数设置的，宽度150px是因为box的长度300 * 50%=150px，高度同理(90px)。
百分数是容器的百分数。
直接设置px的就以像素的实际值设置图片尺寸。
cover
cover 值尽可能大的缩放背景图像并保持图像的宽高比例（图像不会被压扁）。该背景图以它的全部宽或者高覆盖所在容器。当容器和背景图大小不同时，背景图的 左/右 或者 上/下 部分会被裁剪。
200x200px的图片1:1等比例放大尽可能填满box。
而160 x 200px的图片，对于图片长度，160要拉伸至300px，相应的高度因为等比例方法也要拉伸至相应高度。
160:200 = 300:y
高度应该拉伸到375px，由于box只有300px，因此剩余75px将会被裁剪，所以腿脚短了一截儿233333。
并且cover是对整体图片长宽一起生效，对长或宽分别设置cover和其他值没有效果。
且，此时如果动态改变容器的尺寸，图片也会动态变化，保证实时尺寸充分填充容器。
注意：这个动态调节和cover的稍微有不同，后面会说
可见，只要容器长或者宽其中一者发生变化，图片就会cover（图片小不够容器就等比例放大，但不会等比例缩小）至相应尺寸以便刚好填充容器，哪怕只有长度变化或者只有宽度变化。
如若设置了background-position，变化也会按照position定位的具体值做更改。
没有position
有position
对于图片本身尺寸大于容器的，容器缩小后，容器依然是被"填满"的，所以图片本身不会等比例缩小，这和contain属性略有不同。
contain
缩放背景图片以完全装入背景区，可能背景区部分空白。
默认情况下，如若图片尺寸刚好合适，那也就罢了，如若不合适，还是罢了.......
contain会永远保证图片原生比例不变
注意这个原生比例，之后的任何调整都会严格按照初始的比例来放大或者缩小。
160x200px就是一个例子，300x300px的容器"包不住"，为了放大图片，且会按照160/200的比例去放大，当放大至高度率先达到300px后，停止放大。哪怕宽度还没到300px产生了空隙，因为要贯彻严格按原比例放大这一"contain信条"。
对于下图，把border的width从300降低到250px，为了适应容器，图片也会原比例缩小，由于高度缩小了，也就产生了50px的空隙。
上图，是应用了
position:center center，并调整了容器宽高后的contain效果。
应用
经常看到一些全屏背景图片的网页设计，可以将容器height:100%，不设置宽度，body和htmlheight:100%，background-image: cover就OK了。
关于background-image还有很多应用，互联网有很多我这个应用小白就不误导大家了。
border-clip
background-clip 设置元素的背景（背景图片或颜色）是否延伸到边框下面。
如果没有设置背景颜色或图片，那么这个属性只有在边框（border）设置为透明或半透明时才能看到视觉效果（查看 border-style 或 border-image），不然的话，这个属性造成的样式变化会被边框覆盖住。
background-clip: text
关于background-clip: text，有一个应用点可能会经常用到。
就是将元素背景图嵌入到文字中，挺多网站也会用到这个设计的。
<body>
<style>
* {
margin: 0;
padding: 0;
}
div {
width: 1500px;
margin: 30px auto;
text-align: center;
}
p {
font-size: 2em;
height: 80px;
font-family: "微软雅黑" ;
/* border: solid 1px black; */
}
.p1 {
background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
background-clip: text;
-webkit-background-clip: text;
color: rgba(0, 0, 0, 0.2);
}
.p2 {
font-size: 5em;
height: 208px;
line-height: 200px;
background-image: url(./img/test3.jpg);
background-repeat: repeat;
background-position: -1px -340px;
-webkit-background-clip: text;
background-size: cover;
color: rgba(0, 0, 0, 0.1);
}
</style>
<div>
<p class="p2">绿草苍苍 白雾茫茫 有位佳人 在水一方</p>
</div>
<div>
<p class="p1">The background is clipped to the foreground text.</p>
<p class="p1">2019年1月3日 06:05:45</p>
</div>
</body>
在MDN中也有使用说明，我这儿就是照抄了。
待更.....
