text-shadow
设置文字的阴影效果
text-shadow:[颜色 x轴 y轴 模糊半径],[颜色 x轴 y轴 模糊半径]...
text-shadow:[x轴 y轴 模糊半径 颜色],[x轴 y轴 模糊半径 颜色]...
语法注释:
（1）.颜色:表示阴影的颜色值。
（2）.x轴:水平方向的偏移量，单位是像素。
（3）.y轴:垂直方向的偏移量，单位是像素。
（4）.模糊半径:阴影的影响范围，不能为负值，值越大越模糊。
例如：
阴影的颜色可以在最前面也可以在最后面
text-shadow:green 300px 0px 0px;
x轴偏移量演示，将文字的水平偏移量设置为300px，阴影颜色为绿色。
text-shadow:green 0px 60px 1px;
y轴偏移量演示，将文字的垂直偏移量设置为60px，阴影颜色为绿色。
text-shadow:green 10px 20px 5px;
多重阴影
text-shadow:green 5px 10px 5px,blue 8px 10px 6px;
<!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">
<title>text-shadow</title>
<style>
div p:first-of-type{
font-size: 50px;
text-shadow: red 0 15px 10px;
}
div p:nth-child(2){
font-size: 50px;
text-shadow: green 15px 0 10px;
}
div p:nth-last-child(2){
font-size: 50px;
text-shadow: blue 15px 15px 10px;
}
div p:last-of-type{
font-size: 100px;
text-shadow: red 15px 15px 3px,burlywood 10px 0px 5px;
}
</style>
</head>
<body>
<div>
<p>Hello World!</p>
<p>Yz</p>
<p>Zs</p>
<P>good</P>
</div>
</body>
</html>
text-overflow
text-overflow: clip|ellipsis|string
参数解析：
（1）.clip：规定对溢出的文本进行裁切。
（2）.ellipsis：规定使用"..."替代溢出的文本。
（3）.string（处于实验状态）：规定使用指定的字符串替代溢出的文本。
使用时需要和overflow和white-space配合使用
<!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">
<title>text-overflow</title>
<style>
.one{
background-color: bisque;
height: 50px;
width: 500px;
}
p{
white-space: nowrap;
overflow: hidden;
text-overflow:ellipsis;
}
</style>
</head>
<body>
<div class="one">
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nobis debitis id at. Ducimus delectus, impedit necessitatibus repellendus qui hic voluptatibus, placeat reiciendis officia, maxime vitae. Id fuga autem numquam, repellat sit asperiores, similique voluptatum iusto facilis libero expedita dolorem et. Minima ab eaque eos deleniti id animi tempore delectus nihil!</p>
</div>
</body>
</html>
text-fill-color
可以设置文本的填充颜色。
如果同时设置 text-fill-color和color属性，那么前者将覆盖后者的效果
<!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">
<title>text-fill-color</title>
<style>
div{
-webkit-text-fill-color: blue;
font-size: 50px;
color: red;
}
</style>
</head>
<body>
<div>
ZS
YZ
</div>
</body>
</html>
网友评论