1. 文字阴影 text-shadow
- 使用：
- text-shadow: 水平方向偏移量 垂直方向偏移量 模糊程度 颜色;
-
#box { text-shadow: 10px 10px 3px deeppink; // 1个阴影 }
- 多个阴影 加一个逗号 写第二个阴影的样式
#box { text-shadow: 10px 10px 3px deeppink, 20px 20px 6px blue; // 2个阴影 }
-
2. text-shadow 做 浮雕文字
- 使用：
-
#box:hover { color: #fff; //文字为 白色 text-shadow: 2px 2px 5px #000; // 黑色描边 }
3. text-shadow 做 文字模糊
- 使用：
-
#box:hover { color: transparent; // 文字设置为透明 text-shadow: 0px 0px 80px rgba(0, 0, 0, 0.3); // 初探 CSS3 过渡
transition: 1s； }
4. 文本描边 -webkit-text-stroke
- 使用：
-
#box:hover { /* 文本描边：描边区域的宽度 颜色 */ -webkit-text-stroke:2px yellowgreen ; }
5. 文字排版
- 使用：
-
#box:hover { unicode-bidi: bidi-override; // 必须配合使用 // direction: ltr; // 默认方向，从左到右 direction: rtl; // 从右到左 }
6. 文字背景图片 -webkit-background-clip
- 使用：
-
#box:hover { background-image: url(./img/bg.jpg); background-repeat: no-repeat; /* 背景裁剪 */ -webkit-background-clip: text; // 沿着文字呈现 color: rgba(255, 0, 0, 0.3); // 让文本颜色透明，即可看到文字背景图 background-position: -12px -60px; // 调背景图片的位置 }
-
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>CSS3 文字样式</title> <style type="text/css"> body { width: 100%; color: #000; background: #96b377; font: 14px Helvetica, Arial, sans-serif; } body>div { width: 500px; margin: 60px auto; font-size: 27px; color: #3465c3; text-align: center; line-height: 54px; background-color: #eee; } #double_shadow:hover { text-shadow: 10px 10px 3px rgba(255, 0, 0, 0.3), 20px 20px 6px rgba(0, 0, 255, 0.5); } #embossed_text:hover { color: #eee; text-shadow: 0px 0px 6px #000; } #fuzzy_text:hover { color: transparent; transition: 1s; text-shadow: 0px 0px 30px rgba(43, 2, 2, 0.8); } #stroke_text:hover { font-size: 32px; font-weight: 700; -webkit-text-stroke: 1px red; } #rtl_text:hover { unicode-bidi: bidi-override; direction: rtl; } #bg_img_text:hover { font-size: 48px; font-weight: 700; background-image: url(./img/RocketRaccoon.jpg); -webkit-background-clip: text; color: transparent; background-repeat: no-repeat; background-position: -725px -877px; } </style> </head> <body> <div id="text_shaow"> <span id="double_shadow">文字双阴影</span><br/> <span id="embossed_text">浮雕文字</span><br/> <span id="fuzzy_text">文字模糊</span><br/> </div> <div id="text_border"> <span id="stroke_text">文字描边</span> </div> <div id="text_direction"> <span id="rtl_text">文字排版</span> </div> <div id="text_bg_img"> <span id="bg_img_text">文字背景</span> </div> </body> </html>