1).霓虹燈效果spa
.demo1{ text-shadow: 0 0 20px #fff; color: #fff; }
.demo1{ color: #fff; /*添加多個陰影效果*/ text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de; }
2).投影效果3d
.demo2{ color: #000; text-shadow: 0 1px 1px #fff; }
3).浮雕效果code
.demo3{ color: #ccc; text-shadow: -1px -1px 0 #fff, 1px 1px 0 #333, 1px 1px 0 #444; }
4).模糊效果blog
.demo4{ color: transparent; text-shadow: 0 0 5px #f96; }
.demo5{ color: #fff; /*text-shadow不支持陰影外延,因此使用多個陰影效果模擬*/ text-shadow: 1px 1px rgba(197, 223, 248,0.8), 2px 2px rgba(197, 223, 248,0.8), 3px 3px rgba(197, 223, 248,0.8), 4px 4px rgba(197, 223, 248,0.8), 5px 5px rgba(197, 223, 248,0.8), 6px 6px rgba(197, 223, 248,0.8); }
.demo6{ color: #eee; text-shadow: 5px 5px 0 #666, 7px 7px 0 #eee; }