3.6 (案例) text-shadow
2017-06-07 本文已影响0人
柒月柒日晴7
text-shadow.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box1{
color: #fff;
font-size: 30px;
/*text-shadow:1px 1px 10px #000;*/
text-shadow:1px 1px 5px red;
}
.box2{
color: #fff;
font-size: 30px;
text-shadow:1px 1px 1px red,2px 2px 2px #333,3px 3px 3px #FFC0CB,4px 4px 4px #FADB4E,5px 5px 5px #000,6px 6px 5px #000,7px 7px 5px #000,8px 8px 5px #000,9px 9px 5px #000,10px 10px 5px #D00000;
}
</style>
</head>
<body>
text-shadow:水平偏移量 垂直偏移量 阴影模糊值 颜色(rgba)
<div class="box1">
文本阴影效果
</div>
text-shadow 可设置多个阴影效果
<div class="box2">
文本阴影效果
</div>
</body>
</html>
