0元购京东自营斐讯K2路由器返399元活动

常用的CSS3新增属性

作者:     目录: 编码

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

标签: .
发表: 2010年03月11日

10 个评论

  1. Pingback: 利用CSS3制作无背景图片特效按钮 « 任鸟飞网页设计
  2. Pingback: 在CSS3与Photoshop对比中学习(Text Shadow)字符阴影 « 任鸟飞网页设计博客-关注网页设计、网站开发、图形图像设计、互联网趣味信息及搜素引擎的IT原创博客
  3. Pingback: CSS3 背景颜色渐变属性 gradient 使用详解及代码生成工具 « 任鸟飞网页设计博客-关注网页设计、网站开发、图形图像设计、互联网趣味信息及搜素引擎的IT原创博客
  4. Pingback: 使用HTML5和CSS3制作的网站模板下载 « 任鸟飞网页设计博客-关注网页设计、网站开发、图形图像设计、互联网趣味信息及搜素引擎的IT原创博客
  5. Pingback: 利用CSS3制作淡入淡出动画效果 « 任鸟飞网页设计博客-关注网页设计、网站开发、图形图像设计、互联网趣味信息及搜素引擎的IT原创博客
  6. Pingback: CSS3 到底有多强大? « 任鸟飞网页设计博客-关注网页设计、网站开发、图形图像设计、互联网趣味信息及搜素引擎的IT原创博客
  7. Pingback: 利用 CSS3 的 transition 属性制作过渡效果的导航栏 « 任鸟飞网页设计博客-关注网页设计、网站开发、图形图像设计、互联网趣味信息及搜素引擎的IT原创博客
  8. Pingback: 边框和线条美工设计的6个技巧 « 任鸟飞网页设计博客-关注网页设计、网站开发、图形图像设计、互联网趣味信息及搜素引擎的IT原创博客
  9. 任鸟飞 says:

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

  10. Pingback: 如何禁止百度转码 | 任鸟飞网站设计博客 - 关注网站网页设计、网站推广及网站赚钱

发表评论

电子邮件地址不会被公开。 必填项已用*标注