-
text-show 属性实现 (从六个方向设置文本阴影面积)
- 优点: 兼容性好
- 缺点:
- 1.描边阴影形状不平滑 (因方向只有6个,不全面)
- 2.如果设置color:transparent; 透明 就会展示背后的阴影
-
-webkit-text-stroke 属性实现
- 缺点: 兼容性不好
- 优点:
- 1.描边阴影形状平滑
- 2.如果设置color:transparent; 透明 没有影响
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.box {
width: 100%; /* 设置容器宽度 */
height: 300px; /* 设置容器高度 */
position: relative;
margin: 0 auto;
}
.background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url("../assets/img/渐变色.png"); /* 设置背景图路径 */
background-repeat: no-repeat; /* 禁用背景图重复 */
background-position: center; /* 背景图居中对齐 */
transform: rotate(180deg); /* 旋转背景图180度 */
background-size: cover; /* 背景图铺满容器 */
}
.box_text {
position: absolute;
top: 45%;
left: 42%;
color: black;
font-size: 50px;
text-align: center;
vertical-align: middle;
text-shadow: 0 2px #fff, 0 -2px #fff, -2px 2px #fff, -2px 0 #fff, 2px 0 #fff;
}
.box_text2 {
position: absolute;
top: 45%;
left: 42%;
color: black;
font-size: 50px;
text-align: center;
vertical-align: middle;
-webkit-text-stroke: 2px #fff;
}
</style>
</head>
<body>
<div class="box">
<div class="background-image"></div>
<span class="box_text"> TEXT STROKE</span>
</div>
<div class="box">
<div class="background-image"></div>
<span class="box_text2"> TEXT STROKE</span>
</div>
</body>
</html>
- 效果图
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
