CSS3 基础知识
上周我 (作者) 发了一个关于 CSS3 下拉菜单的文章, 有些同学抱怨我没有对 CSS 代码进行详细的说明. 那好, 本文将普及一些新属性的基本知识: text-shadow, box-shadow, and border-radius. 这些 CSS3 属性经常被用来增强页面布局, 并且很容易理解.
RGBA
前三个数值是 RGB 颜色的值, 最后一个数值指代的是元素的透明度 (0 表示透明, 1 表示不透明)
RGBA 可以应用到所有与颜色相关的属性中. 例如: 文字颜色, 边框颜色, 背景颜色, 阴影颜色, 等等.
文本阴影
文本阴影由下列顺序的参数构成: x-offset, y-offset, blur, and color.
将 x-offset 设置为负数即将阴影移动到左侧. 将 y-offset 设置为负数即将阴影移动到上方. 请不要忘记你可以使用 RGBA 来控制阴影的颜色.
同时你还可以为 text-shadow 指定一个阴影列表 (以逗号分隔). 下列例子使用了两个 text-shadow 定义来控制页面输出效果 (1px 上阴影和 1px 的下阴影).
text-shadow: 0 1px 0 #fff, 0 -1px 0 #000;
圆角
圆角的定义方式与 padding 和 margin 属性类似 (如: border-radius: 20px). 便于浏览器渲染圆角, 为 webkit 添加 "-webkit-", 为 Firefox 添加 "-moz-".
你可以为每个角设定不同的值. 请注意 Firfox 和 webkit 对圆角属性的不同命名方式.
Box 阴影
构成 Box 阴影的参数序列与 text-shadow 属性相同: x-offset, y-offset, blur, and color.
再一次说明一下, 你可以应用一个或多个 Box 阴影. 下列例子定义了三个 Box 阴影.
-moz-box-shadow: -2px -2px 0 #fff, 2px 2px 0 #bb9595, 2px 4px 15px rgba(0, 0, 0, .3);
译者的话
今天看到一篇关于 CSS3 的文章, 很基础, 但很实用. 这翻译一下, 希望更多人会为 CSS3 的到来做好准备.
原文链接: The Basics of CSS3
@zhuang
ie9可以啊！！
求高手指教除了美化页面和CSS其他增益吗？
我是来围观css3的。。技术进步了。。该学习了
我想学，但还是云里雾里的，哎。。。
很好·
日哦!也不支持
这些在IE9下不知道是否支持，一会验证一下。
很强大的css3 我觉得学习css最重要的 就是系统化！理清思路 以不变应万变
CSS3 很帅，实现了以前要靠图片来完成的工作
CSS3是很好，但需要浏览器的支持，IE浏览器真是头疼啊。。。。
你现在这个风格是css哪个版本的？
效果很棒。。。不过不知道啥时候能普及
学到了,直接看上一篇真的有点迷惑
IE貌似可以通过filter实现吧，不过效果可能没CSS3好。
不錯，最後一個圓角的多重設定我都不知道耶。
受教了
我家近期也積極用簡單的css3增強標題效果耶~
希望css 3可以普遍化
webkit 的圆角还可以对单个角有两个赋值，让一个圆角的两边不一样。真变态。。。
@mg12
撇开IE来说，目前常用的CSS3属性里，Firefox和Webkit都有自己的hack，而且渲染出来的效果会有点不同，虽然小规模应用问题可以忽略，但大量应用CSS3属性时就不能忽略了。因此我觉得标准的完善应该先于浏览器的支持。
@crossyou
呵呵, 最近我看看 CSS3, 不能落后啊.
@Yacca
让 IE 去死吧.
@underone
对, 用得多并不一定会好看, 而且渲染是需要消耗 CPU 的.
@bolo
如果用 CSS3, 我建议 IE 和其他浏览器分开处理, 写两套 CSS. (可以部分分开)
这个真是好,一个非常好的教材
效果很棒。。。不过不知道啥时候能普及
学习一下
简单明了，我等菜鸟就需要这种文章，希望可以发布一系列的文章，手册我实在是看不去
css3的阴影效果很酷，IE彻底白了
作者那个菜单真帅了说..
CSS3普及的关键是标准要尽快完善，否则要写的hack就太多了
同意，滥用阴影效果有时候真的反而会变成一件糟糕的事情。。。
原来IE不支持。
指望IE支持...算了吧...
其实我觉得现在的问题是，很多人都用阴影效果，但其实真的很难看还影响阅读
这玩意不能滥用啊...
ie赶紧支持吧.....哈哈
赶紧从床上起来，强你的沙发！ 偶也。
关于这个，我也是在查看WordPress后台登录框 源文件的css时发现的，并且也在使用了，照葫芦画个瓢，没想到您在这里详细的讲解了，那我就好好看看。