如果设计稿中有很多描边字,如果都切成图片将造成大量的图片素材,工作量大,加载速度慢,难维护。
今天才发现 CSS3 box-shadow 是可以实现描边字的,以前遇到描边字都是改成图片…. 现在好了,只怪我才慢知道
附上测试DEMO
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>box-shadow</title> <style type="text/css"> .aa{ font-size: 60px; color: #F99; text-decoration: none; text-shadow: 1px 0 0 #622E00, -1px 0 0 #622E00, 0 1px 0 #622E00, 0 -1px 0 #622E00; } </style> </head> <body> <a href="#" class="aa">测试描边</a> </body> </html> |
再也不用去弄成图片了
不过box-shadow IE低版本不支持 而且还有性能问题,根据需求使用..
GET 新技能