box-shadow outline 实现双边框阴影

CSS 文本阴影技巧

最新推荐文章于 2023-05-16 16:43:15 发布

转载最新推荐文章于 2023-05-16 16:43:15 发布 · 215 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/mlh1421/p/6872609.html

本文介绍了 CSS 中 text-shadow 的使用方法及其对网页元素的影响。详细解释了如何设置横向与纵向偏移、模糊距离及阴影颜色，并提醒多次叠加可能导致性能问题。

文字阴影

text-shadow
box-shadow

格式：text-shadow：x y blur color, … 参数 x 横向偏移 y 纵向偏移 blur 模糊距离 color 阴影颜色文本阴影如果加很多层，会很卡很卡很卡

没有border-shadow 这一项

效果：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title></title>
 6     <style>
 7 *{margin: 0;padding: 0;}
 8 .box{width: 100px;height: 100px;border:5px solid red;outline:9px solid blue;}
 9  
10     </style>
11 </head>
12 <body>
13     <div class="box"></div>
14 </body>
15 </html>
16