常用的CSS3新增属性

作者:     目录: PHP+MySQL     发表: 2010年03月11日

随着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 示例预览

10 个评论

  1. 任鸟飞说道:

    推荐一下,很不错的CSS3效果。

发表评论

您的电子邮箱地址不会被公开。