您的位置：首页 > 其它

两种方法实现文字阴影效果

2017-07-27 23:29 375 查看

1：使用CSS定位的方法

—使用两个相同的文本，并通过设置第二个文本的位置，并将其放在第一个文本的右下方来制造阴影效果

2：使用CSS3提供的阴影属性来设置阴影

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文字阴影效果</title>
<style type="text/css">
#frame1,#frame2{
border: 1px solid #f00;
width: 1000px;
font-family: "黑体";
font-size: 50px;
overflow: hidden;
margin: 20px;
}
#div1{
color: #f00;
position: absolute;
}
#div2{
position: relative;
left: 5px;
top:5px;
z-index: -1;
}
#div3{
color: #f00;
text-shadow: 5px 5px 0px #000;
}
</style>
</head>
<body>
<div id="frame1">
<div id="div1">CSS3 文字阴影效果通过CSS定位实现</div>
<div id="div2">CSS3 文字阴影效果通过CSS定位实现</div>
</div>
<div id="frame2">
<div id="div3">CSS3 文字阴影效果通过CSS3 特有属性实现</div>
</div>
</body>
</html>

方法一代码剖析：第一个作为根子节点封装了其内部所有节点，该节点的CSS的overflow属性设置为hidden，这样可以隐藏超出本div范围的子节点的内容。id为div1标签的CSS的position属性设置为absolute，这样可以使该div脱离其根子节点frame1，即id为div2的div标签才是frame1的第一个子节点，所以div1和div2的位置实际上会重合到一起，为了使div2比其原来的位置有所偏移，将div2的position属性设为relative，将left和top属性设置为5px，使其横纵坐标比原位置偏移5个像素。

效果图：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航