加载中…CSS3 投影
(2011-05-23 17:02:05)
标签：
css3投影box-shadow兼容contentbeforeafterit |
分类： CSS3 |
最近在用css3做公司的新项目，上网看了些效果，觉得这个是一个很神奇的例子：
http://nimbupani.com/demo/css3-drop-shadows.html
我看了之后不知道它是怎么实现的，要用firebug查看，发现去除背景色之后，页面出现2个小矩形，再利用小矩形的box-shadow拼合成元素的投影，但是页面却没有用来“挂钩”的标签。查看样式，发现了它是用伪类before跟after + content来实现的，先前有接触过content但是没有怎么研究它：
:after 伪元素在元素之后添加content内容。
然后就在“内容”这里做手脚：下面还有一些精彩的手脚，很漂亮：
http://nicolasgallagher.com/css-drop-shadows-without-images/demo/
http://nimbupani.com/demo/css3-drop-shadows.html
我看了之后不知道它是怎么实现的，要用firebug查看，发现去除背景色之后，页面出现2个小矩形，再利用小矩形的box-shadow拼合成元素的投影，但是页面却没有用来“挂钩”的标签。查看样式，发现了它是用伪类before跟after + content来实现的，先前有接触过content但是没有怎么研究它：
content
-- 定义字符串
:before 伪元素在元素之前添加content内容。- 取值: normal | none | [ <string> | <uri> | <counter> | attr(<identifier>) | open-quote | close-quote | no-open-quote | no-close-quote ]+ | inherit
- 引用网址:http://www.dreamdu.com/css/property_content/
- 初始值: normal
- 继承性: 否
- 适用于: :before与:after
- content，中文的"内容"意思
:after 伪元素在元素之后添加content内容。
然后就在“内容”这里做手脚：下面还有一些精彩的手脚，很漂亮：
http://nicolasgallagher.com/css-drop-shadows-without-images/demo/
喜欢
0
赠金笔
前一篇：CSS 清理浮动方式