当前位置: 首页 > 图文教程 > 网页制作 > CSS样式表 > 5个实例让你轻松了解CSS3新属性

CSS样式表
css 块状元素和内联元素
CSS 盒模型、块状元素与内联元素、CSS选择器
css 浮动 理解Float的含义
CSS 清除浮动Clear
CSS 制作网页导航条(上)
CSS 制作网页导航条(下)
css 浮动(float)页面布局
css 浮动(float)页面布局(下)
css position 定位
css 定位应用实例
CSS Hack 有关浏览器兼容方面
css 单图片按钮实例(css 图片变换)
使用X-UA-Compatible来设置IE浏览器兼容模式
div overflow 超出隐藏属性使用说明
CSS 使用规则总结
div+CSS 兼容小摘
CSS的inherit与auto使用分析
如何组织和注释CSS文件
CSS样式按整洁易懂的结构组织
CSS Prism 查看和编辑CSS中用到的颜色

No. « 113 114 115 116 »

技术文章搜索

关键字

CSS样式表 中的 5个实例让你轻松了解CSS3新属性

出处:互联网   整理: 软晨网（RuanChen.com）   发布: 2010-01-30   浏览: 37 ::
收藏到网摘: n/a

css是大家众所周知的，广泛的用来定义网站样式。随着css3版本的发布，css3支持一些省时、省力的一些新属性。尽管目前仅仅最新的浏览器支持这些新属性，但还是感觉不错的。此文章我将介绍5个css3的新属性。
效果浏览
代码下载

一、基本代码结构
在开始这个教程之前，我们先把基本的代码结构编写好，我将结合这些代码来讲解介绍。
我们需要如下div代码元素
1、#round，讲解css3圆角效果时使用；
2、#indie，讲解个性圆角效果时使用；
3、#opacity，讲解css3实现透明的新方法；
4、#shadow，在不使用photoshop情况下，如何创建投影效果；
5、#resize，介绍一个新的css3属性，调整缩放元素。

XHMTL代码如下：

  1. <!DOCTYPE html PUBLIC ”-//W3C//DTD XHTML 1.0 Transitional//EN” ”http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
  2. <html xmlns=“http://www.w3.org/1999/xhtml”>
  3. <head>
  4. <meta http-equiv=“Content-Type” content=“text/html; charset=utf-8″ />
  5. <title>An Introduction to CSS3; A Nettuts Tutorial</title>
  6. <link href=“style.css” rel=“stylesheet” type=“text/css” />
  7. </head>
  8. <body>
  9. <div id=“wrapper”>
  10. <div id=“round”> </div>
  11. <div id=“indie”> </div>
  12. <div id=“opacity”> </div>
  13. <div id=“shadow”> </div>
  14. <div id=“resize”>
  15. <img src=“image.jpg” alt=“resizable image” width=“200″ height=“200″>
  16. </div>
  17. </div>
  18. </body>
  19. </html>

在html文档里面，我们创建了几个div，同时给相应的div定义了ID。
我们创建基本的css样式。

  1. body    {
  2. background-color: #fff;
  3. }
  5. #wrapper {
  6. width: 100%;
  7. height: 100%;
  8. }
  10. div {
  11. width: 300px;
  12. height: 300px;
  13. margin: 10px;
  14. float: left;
  15. }
  17. /*rest of the code will come here, later*/

正如你看到的，我们给每一个div标签设置了300px的宽和300px的高。同时给它们定义了float:left（左浮动）让它们显示在一排。

二、圆角
css1

创建圆角效果稍微有点麻烦。首先，你先设计这个圆角效果图片，然后，创建多个结构标签，把圆角图片分别定义在相应的结构里面。这个步骤你是了解的。

这个效果用css3的新属性“border-radius”来做就很简单了，我们先创建div标签并定义黑色背景和黑边。这个border是必须的，因为我们通过这个border边来让border-radius属性生效。

代码如下：

  1. #round {
  2. background-color: #000;
  3. border: 1px solid #000;
  4. }

刷新页面，你就可以看到一个宽高为300px的黑色、正方形的div。现在，我们开始来实现这个圆角的效果。仅仅需要添加2行代码就可以了。

  1. #round {
  2. background-color: #000;
  3. border: 1px solid #000;
  4. -moz-border-radius: 10px;
  5. -webkit-border-radius: 10px;
  7. }

正如你所看到的，我们添加了2行几乎相同的代码，唯一不同的地方就是”-moz”和”-webkit”。-moz主要是针对firefox浏览器的，-webkit则是Safari（苹果）/Google Chrome（谷歌）浏览器的。
刷新你的页面，在firefox（火狐）和Safari（苹果）浏览器里面是你可以看到平滑的圆角div，而在Chrome（谷歌）浏览器里面稍微会有点锯齿的边。

回到代码里面，修改border-radius的值，可以修复圆角有锯齿的情况。border-radius的值越大圆角越平滑，就像在photoshop里面的那样。据我所知，这个元素没有最大值。

三、个性圆角
css2
制作传统的圆角将花费你大量的时间，庆幸的是，css3可以轻而易举的解决它。

这个属性有点类似于我们前面例子，也是使用css3的border-radius属性，然而，我们要对这个代码做一些小的修改。
代码如下：

  1. #indie {
  2. background-color: #000;
  3. border: 1px solid #000;
  4. -moz-border-radius-topright: 10px;
  5. -moz-border-radius-bottomright: 10px;
  6. -webkit-border-top-left-radius: 10px;
  7. -webkit-border-bottom-left-radius: 10px;
  8. }

我们在代码里面添加了”topright”和”bottomRight”，它涉及到div元素的右上圆角和右下圆角。使用这些代码你可以轻易的实现标签似的效果

四、css3的新属性改变透明度
css3
目前，你实现透明的效果，需要添加很多行代码来修复元素透明度。现在好了，css3简化了这个过程，可以轻易的实现。
这行代码很容易记住，仅仅opacity: value;这么一段代码。是不是很好记？
代码如下：

  1. #opacity {
  2. background-color: #000;
  3. opacity: 0.3;
  4. }

五、投影
css4
在photoshop里面给图片添加投影效果是毫无意义的，因为当我们把它应用到网页里的时候，我们先将投影保存为一个图片，然后把它设为背景来模拟投影的效果。现在就不用这么做了（对于现在最新的浏览器来说）不幸的是，还有一些老的浏览器无法支持此属性。
仅仅一行代码，同时设置了4个不同的属性值。

  1. -webkit-box-shadow: 3px 5px 10px #ccc;

第一个值我设置了3px，它主要是设置标签和投影之间的水平距离；第二个值设置了5px，它主要设置标签于投影之间的垂直距离。
另一个值我设置了10px，它是投影半径，正确的解释就是投影的模糊程度或是渐变的程度。
最后一个颜色值是设置倒影的颜色，这意味着阴影不仅限于灰色阴影了，我们还可以使用红色，做成红色投影从而让投影更漂亮。
最终代码如下

  1. #shadow {
  2. background-color: #fff;
  3. border: 1px solid #000;
  4. -webkit-box-shadow: 3px 5px 10px #ccc;
  5. }

正如你所看的，我给div定义了白色背景、黑边和灰色的投影。

六、缩放
css5
最新的css版本，它可以调整元素标签的大小。
使用这个代码以后，我们的元素的右下角会出现一个小三角以提示用户这个元素是可以调整尺寸的。代码依然很简单，可以说仅需要一行代码，当然你还可以配合使 用一些曾经使用过的属性，比如”max-width”, “max-height”, “min-width”和 “min-height”.

  1. #resize {
  2. background-color: #fff;
  3. border: 1px solid #000;
  4. resize: both;
  5. overflow: auto;
  6. }

代码里面我添加了两行css，”resize: both;” 和 “overflow: auto;”overflow这行是必须的，overflow有几个属性值，这里的overflow属性值应设置为auto。
另外一行我添加了”resize: both;”，它声明元素的水平、垂直方向是可以被缩放的。

中文原文：5个效果帮你了解css3
英文原文：5 Techniques to Acquaint You With CSS 3