常用的CSS3新增属性 « 任鸟飞网页设计博客-关注网页设计、网站开发、图形图像设计、互联网趣味信息及搜素引擎的IT原创博客

常用的CSS3新增属性

作者：任鸟飞分类：编码评论：[ 7 ]

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

颜色及透明度 RGBA

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

说明：

alpha ：取值0到1，0代表完全透明，1代表不透明。
red，green，blue ：取值0到255，代表十进制颜色，例如白色#ffffff（16进制）换算成10进制为（255，255，255）。
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;

说明：

x-offset：x方向偏移距离
y-offset：y方向偏移距离
blur：模糊程度（也可以理解为扩散程度）
color：颜色
可添加多重阴影，例如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;

说明：

-webkit-border-radius 适用基于webkit的浏览器
-moz-border-radius 适用于firefox浏览器
根据需要可设置每个角的半径例如设置左上角的边框半径的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 示例预览

除非注明，本博客文章均为原创，转载请以链接形式标明本文地址
原创文章如转载，请注明：转载自任鸟飞网页设计 [ http://www.renniaofei.com/ ]
本文链接地址： http://www.renniaofei.com/code/the-basics-of-css3/
引用通告地址 Trackback URL：直接在本文链接地址后添加 trackback/
本文短网址: http://bit.ly/aNJr8K

任鸟飞

任鸟飞网页设计网创办者主要关注网页设计，网站建设，图形图像设计。 Twitter @renniaofei QQ：29900684

推广服务

7 条评论

利用CSS3制作无背景图片特效按钮 « 任鸟飞网页设计三月 15th, 2010 9:29 上午

[...] 本案例中涉及到4种常用的CSS3属性： [...]
在CSS3与Photoshop对比中学习（Text Shadow）字符阴影 « 任鸟飞网页设计博客-关注网页设计、网站开发、图形图像设计、互联网趣味信息及搜素引擎的IT原创博客四月 18th, 2010 6:56 上午

[...] 实现Text shadow （字符阴影）的CSS代码为 text-shadow: #fff 0px 1px 0px; 这段代码代表阴影颜色为#fff ，x方向偏移为0px，y方向便宜1px，模糊程度0px，更加具体的说明可参考常用CSS3新增属性。 [...]
CSS3 背景颜色渐变属性 gradient 使用详解及代码生成工具 « 任鸟飞网页设计博客-关注网页设计、网站开发、图形图像设计、互联网趣味信息及搜素引擎的IT原创博客四月 24th, 2010 10:19 下午

[...] 利用CSS3新增的gradient（背景颜色渐变）属性，可以直接编写相应CSS代码，制作渐变背景颜色的效果。相对于制作渐变背景图片，利用CSS3制作的渐变背景颜色则更容易修改，维护更方便。 [...]
使用HTML5和CSS3制作的网站模板下载 « 任鸟飞网页设计博客-关注网页设计、网站开发、图形图像设计、互联网趣味信息及搜素引擎的IT原创博客五月 6th, 2010 7:51 下午

[...] 现在很多网站都已经开始使用CSS3了，利用CSS3可以制作投影，发光，渐变，圆角等效果。 [...]
利用CSS3制作淡入淡出动画效果 « 任鸟飞网页设计博客-关注网页设计、网站开发、图形图像设计、互联网趣味信息及搜素引擎的IT原创博客六月 29th, 2010 8:12 下午

[...] CSS3新增动画属性“@-webkit-keyframes”，从字面就可以看出其含义——关键帧，这与Flash中的含义一致。 [...]
CSS3 到底有多强大？ « 任鸟飞网页设计博客-关注网页设计、网站开发、图形图像设计、互联网趣味信息及搜素引擎的IT原创博客七月 8th, 2010 7:34 上午

[...] CSS3新增了大量的属性，例如圆角、阴影、颜色渐变、透明度、动画等，而这些也都是构成图形的基本属性，这是否意味着可以直接利用 CSS3 来定义图形样式呢？我猜想未来的网页设计趋势将是“去图片化”。 [...]
利用 CSS3 的 transition 属性制作过渡效果的导航栏 « 任鸟飞网页设计博客-关注网页设计、网站开发、图形图像设计、互联网趣味信息及搜素引擎的IT原创博客七月 17th, 2010 5:08 下午

[...] CSS3 新增了大量属性，在实际使用过程中，需要充分挖掘这些属性的潜力，才能制作出富有创意的作品。这里就介绍一个如何利用 CSS3 的 transition 属性来制作一个具有过渡效果的导航栏。 [...]

任鸟飞网页设计