任鸟飞网站设计博客

随着CSS的发展，CSS3新增一些有关Borders、Colors、Text effects 等属性，丰富了页面的显示效果，甚至可以代替某些图片样式（例如阴影等）。

颜色及透明度 RGBA

用法：background:rgba(red,green,blue,alpha)

说明：

1. alpha ：取值0到1，0代表完全透明，1代表不透明。
2. red，green，blue ：取值0到255，代表十进制颜色，例如白色#ffffff（16进制）换算成10进制为（255，255，255）。
3. RGBA属性可以应用在于颜色有关的所有标签上，例如 字体颜色（font color），边框颜色（border color），背景颜色（backgr color），阴影颜色（shadow color）等。

示例：

HTML

<div id="rgba">
  <p class="rgba"><strong>RGBA示例</strong><br />
  背景颜色为白色（#000000），透明度为0.2<br />
  background-color: rgba(0,0,0,0.2);
  </p>
</div>

CSS

#rgba{
 background-image: url(http://www.it.com.cn/f/edu/066/14/060614_edu_ps_36.jpg);
 width: 600px;
 margin-right: auto;
 margin-left: auto;
 background-repeat: no-repeat;
 height: 200px;
}
.rgba {
 padding: 20px;
 width: 600px;
 background-color: rgba(0,0,0,0.2);
}

RGBA 预览：

文字阴影 Text Shadow

用法：text-shadow:x-offset y-offset blur color;

说明：

1. x-offset：x方向偏移距离
2. y-offset：y方向偏移距离
3. blur：模糊程度（也可以理解为扩散程度）
4. color：颜色
5. 可添加多重阴影，例如text-shadow: 0 1px 0 #fff, 0 -1px 0 #000;

示例：

HTML:

<div id="text-shadow">
  <p class="text-shadow">Text Shadow</p>
  text-shadow:2px 3px 2px #000;
  font-size: 48px;
  color: #009999;
  </div>

CSS:

.text-shadow{
text-shadow:2px 3px 2px #000;
font-size: 48px;
color: #009999;
}

text shadow 预览：

边框圆角 Border Radius

用法：

border-radius: 20px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;

说明：

1. -webkit-border-radius 适用基于webkit的浏览器
2. -moz-border-radius 适用于firefox浏览器
3. 根据需要可设置每个角的半径例如设置左上角的边框半径的CSS代码如下：-webkit-border-top-left-radius: 5px;-moz-border-radius-topleft: 5px;

边框圆角预览:

Box Shadow

用法于text shadow类似：box-shadow:x-offset y-offset blur color;

box shadow 预览:

说明：考虑到CSS代码的兼容性，请尽量添加下面的代码
-webkit-box-shadow: 0 2px 12px rgba(0, 0, 0, .3);
-moz-box-shadow: 2px 4px 15px rgba(0, 0, 0, .3);

CSS3 示例预览