让人欣喜的CSS3.0

2008-05-13 17:22:46

最近在望上看了一下css3，于是把网上搜罗的CSS3的新特征总结如下，目前尚未有软件支持的CSS3。

1、CSS终于能做圆角表格了！对应属性：border-radius。

<div style=" background-color: #ccc;
border: 1px solid #000;
border-radius：5px;
padding: 10px;" >

-moz-border-radius: 5px;
-webkit-border-radius: 5px; 现在在Mozilla/Firefox 和 Safari 3上支持该属性


2、边框渐变border-color

　　css3.0里的border-color选项又有了新功能，它能输出渐变的边框。在firefox中支持该效果，看下面边框的效果：

如果你现在用的是Firefox 的浏览器，那就能看到这个边框的渐变效果

　　它实现的代码是:

border: 8px solid #000;
-moz-border-bottom-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-top-colors:    #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-left-colors:   #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-right-colors:  #555 #666 #777 #888 #999 #aaa #bbb #ccc;
padding: 5px 5px 5px 15px;

　　他的原理是边框设定了边框的宽度后，可以由外道内一个像素一个像素的设置颜色，相当于有很多一个像素的边框组成一个大边框。

3、css3.0中增加的 border-image属性，看起来似乎很像background-image，实际上它们确实类似。通过它可以定义四条边的背景图片，图片是平铺还是 拉伸，定义的时候和定义div的背景图片差不多。噢，还可以定义边框四个角上的背景图片。当前的浏览器就Safari 3支持，具体代码如下：

  • border-image:  /*  定义边框背景  */

    • border-top-image

    • border-right-image

    • border-bottom-image

    • border-left-image

  • border-corner-image:  /*  定义边角背景  */

    • border-top-left-image

    • border-top-right-image

    • border-bottom-left-image

    • border-bottom-right-image

-webkit-border-image: url(border.png) 27 27 27 27 round round;

说明：

url(border.png) ：图片地址；
27 27 27 27：上 右 下 左 四条边框的宽度；
round round;round是表示重复平铺，若想把背景变成拉伸，可用stretch代替ground

4、以往对网页上的文字加特效只能用filter这个属性，这次CSS3中专门制订了一个加文字特效的属性，而且不止加阴影这种效果哦。对应属性：font-effect。

5、丰富了对链接下划线的样式，以往的下划线都是直线，这次可不一样了，有波浪线、点线、虚线等等，更可对下划线的颜色和位置进行任意改变，哈哈~~下划线的世 界从此不再单一。（还有对应顶线和中横线的样式，效果与下划线类似）对应属性：text-underline-style，text-underline -color，text-underline-mode，text-underline-position。

6、我们在做笔记时经常要在文字下点几个点或打个圈什么的，以示重点，CSS3也开始加入了这项功能，这应该在某些特定网页上很有用。对应属性：font-emphasize-style和font-emphasize-position。



7、background-clip 和 background-origin属性

　　background-clip 和 background-origin 是 CSS3 中新加的 background module 属性，用来确定背景的定位。

　　background-clip 用来判断 background 是否包含 border 区域。而 background-origin 用来决定 background-position 计算的参考位置。

　　background-origin ：用来确定背景的显示区域。他有三个参数 值：border,padding,content。选择border就从border区域开始显示背景，例如你设置了10px的虚线border，那你 就能在虚线中看到背景；选择padding 则从padding 区域开始显示背景；同理选择content就是只在content区域显示背景。

　　background-clip ：用来确定背景的裁剪区域，或者说是隐藏区域。它有两个参数值可 选：border,padding。选择border就从border区域向外裁剪背景；选择padding就从padding区域向外裁剪背景。确实， 很多朋友可能都有过这样的经历，为了不在padding区域内显示背景而不得不多用一个div或者别的方法来代替来padding的效果，现在大可不必如 此了。


语法为：

background-clip: [border | padding] [, [border | padding]]*

background-origin: [border | padding | content] [, [border | padding | content]]*



对于 background-clip：

如果是 padding 值，则 background 忽略 padding边缘，border 是透明的。如果是 border 值，则background 包括 border 区域。如果 background-image 图片有多个，对应的 background-clip 值之间用逗号分隔。

对于 background-origin：

如果是 padding 值，则 position 相对于 padding 边缘（”0 0″ 为 padding 边缘的左上角，而 “100% 100%” 为右下角）。如果是 border 值，则意味着相对 border 边缘。而 border 值则相对于内容边缘。与 background-clip 相同，多个值也用逗号分隔。如果 background-clip 是 padding 值，background-origin 是 border 值，并且 background-position 是 “top left”（默认初始值），则背景图左上角将会被截取掉部分。

这两个属性仅从 CSS3 才出现，在未使用该属性 background module 中的默认表现又如何呢？

background-clip 默认类似于 background-clip:border。

background-origin 默认类似于 background-origin:padding。

下面举个运用 background-origin 属性的简单例子，效果如下图：

　

8、CSS3 中的 Gird 布局

无论它最终实现是否如草案中的描述，但这个功能本身就已经足够吸引人了。

我们看看下面这张图：

w3cgird

　　图中蓝色的线不会出现在实际的网页中。对于这个布局复杂的三栏网页来说，如果使用 CSS3 Gird 布局的话，我们只需这样写：

body { columns:3; column-gap:0.5in; }

img { float:page top right; width:3gr; }

 

　　其中，body 部分声明页面为 3 栏，栏间距为 0.5英寸；img 中 float 属性指明图片浮动位置为页面的右上角（CSS3 定位好强大 -__-），而宽度为 3 个栏宽。只需这样两行 CSS，我们就可以实现这个复杂的布局了。真的很神奇。

　　Gird 布局是好，不过如果你认为它很简单的话，你就大错特错了。看看 w3c 中关于它的介绍，你会发现理解它的意义不亚于看懂天书。好在还是个草案，但愿它到了正式版的时候，能够更加简单易用点。

　　Gird 布局应用很广泛，最简单的例子就是内容的分栏显示。但这个 CSS3 特性目前还没有任何浏览器可以支持它。谁要是能第一个支持它（以及其它 CSS3 草案），那就酷毙了。不知道，最近异常低调的 IE8，会不会是这第一个吃螃蟹的人呢？

9、一直以来，浏览器的透明一直无法实现单纯的颜色透明，每次使用alpha后就会把透明的属性继承到子节点上。换句话说，很难实现 背景颜色透明 而文字不透明的效果...

　直到 RGBA 颜色的出现这一切将成为现实。

rgba css3 freeren.org

　　实现这样的效果非常简单，设置颜色的时候我们使用标准的 rgba() 单位即可, 例如 rgba(255,0,0,0.4) 这样就出现了一个红色同时拥有alpha透明为 0.4的颜色.


<body style="background-color:rgb(153,153,255);">

<div style="padding:28px; background-color:rgb(255,0,0);">

<div style="padding:28px; background-color:rgba(255,0,0,0.4);">


　　经过测试 firefox 3.0，safari 3.2，opera 10都支持了 rgba 单位，很可惜的是我们的 ie系列，包括ie8都还没有很好的支持。 如果ie不加快这里的步伐，很快就会输掉这个浏览器的战争...

10、象十六进制和RGB定义颜色一样，css3还支持HSL（色调，饱和度，亮度）的定义方式。既然采用hsl的方式，那就应该有三个参数值：


hue(色调)：0(或360)表示红色，120表示绿色，240表示蓝色，当然可取其他数值来确定其他颜色。

Saturation（饱和度）：取值为0%到100%之间的值。

Lightness（亮度）：取值为0%到100%之间的值。

书写格式如下：

background-color: hsl(0,100%, 50%); 
background-color: hsl(240,100%, 50%);
background-color: hsl(120,100%, 50%);

 

HSLA就是在HSL的基础上多了个控制alpha透明度的参数，取值在0到1之间，格式如下：
background-color: hsl(240,100%, 50%,0.4);
background-color: hsl(120,100%, 50%,0.8);
background-color: hsl(0,100%, 50%,0.2);

11、多重背景

　　css3.0允许一个标签拥有多个背景图片，书写的时候 用逗号将各个图片隔开就行了。

　　示例：background: url(body-top.gif) top left no-repeat,

                                    url(banner_fresco.jpg) top 11px no-repeat,

                                     url(body-bottom.gif) bottom left no-repeat,

                                     url(body-middle.gif) left repeat-y;

12、background-size定义背景大小

　　本来我们只能对背景图片进行位置和重复方式的改变，不能像改变<img />标签图片那样改变大小。而在css3中就能满足改变背景图片大小的愿望。 

　　示例代码：background-size:200px  50px;

　　说明：200px表示宽度，50px表示高度。

　　目前只有Opera 9.5, Safari 3 and Konqueror浏览器中得到支持。在几种浏览器中的写法如下：
　　-o-background-size, -webkit-background-size和-khtml-background-size。

13、box-shadow创造酷炫的模糊阴影

 css3.0的background和border模块增加了个很酷的属性box-shadow，显然从名称就能猜出是制造阴影效果的。目前只能被safari3浏览器所支持。大家看了下面的例子就知道是怎么一回事了。 

例子一：

Safari 3 的用户能在这里看到5个像素模糊的背影

 CSS 代码如下:

-webkit-box-shadow: 10px 10px 5px #888;
padding: 5px 5px 5px 15px;

说明：-webkit-box-shadow: 10px 10px 5px #888中的参数分别表示：阴影水平偏移值（可取正负值，本例中是10px）；阴影垂直偏移值（可取正负值，本例中是10px）；阴影模糊值（本例中是5px）；阴影颜色（本例是#888）。

例子二：
Safari 3 的用户能在这里看到纯黑色的的背影
 css代码如下：

-webkit-box-shadow: -10px -10px 0px #000;
-webkit-border-radius: 5px;
padding: 5px 5px 5px 15px;

14、text-shadow文字也能有阴影

示例代码如下：

text-shadow: 2px 2px 2px #000;

四个参数分别表示阴影的水平位移，垂直位移，模糊程度，阴影颜色。

目前支持的浏览器有Opera 9.5，Safari 3，Konqueror ， Safari 3的屏幕截图如下：

text-shadow css3 freeren.org

15、box-sizing改变盒状模型结构

纵所周知div的盒状模型包括margin,border,padding和content四个部分。border里面是padding，padding里面是content.然而我们可以在css3.0中打破这一结构。使之变成content里面是border，border里面是padding。要实现这一切得建立在一个条件之下：box-dizing:border- box;

以下引用了个例子，该例子是针对firefox的,因为目前只有firefox,Safari 3和opera支持。

文本内容
文本内容.

代码如下：

<style type="text/css">
div.container {
    width:400px;
    border:10px solid black;
    height:40px;
}

div.split {
    -moz-box-sizing:border-box;
     width:50%;
     height:40px;
     border:10px silver ridge;
     float:left;
     padding:5px;
}
</style>
<div class="container">
<div class="split">文本内容</div>
<div class="split">文本内容.</div>
</div>

上一篇：Web设计 用户体验浅析
下一篇：CSS2.0基础知识--语法技巧

发表看法3
  • >> more看看其他人的看法

  • 嗯，是任何人都遇到这个博客加载图片的问题？我试图找出如果它是一个问题对我的结束，或者如果它的博客。任何反馈将不胜感激。

  • 1 alberta payday loans 2012-1-12 06:03 Thursday
  • }

  • 嗨！我知道这是有点偏离主题，但我想知道，如果你知道在哪里可以找到我的评论表单的验证码插件吗？我为你使用相同的博客平台，我找到一个有问题？多谢了！

  • 2 search engine optimization vancouver 2012-1-13 05:21 Friday
  • }

  • 美好的一天！你知不知道如果他们做任何的插件，以保障防止黑客的攻击？失去一切，我努力，我有点偏执。任何提示吗？

  • 3 oh canada 2012-1-21 10:45 Saturday
  • }

有什么想说的吗？

  • 域名注册网站设计西安seo帮我建站web前端技术论坛夫子吧JEEDOO-漂博墨白RainWeb站码