让人欣喜的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基础知识--语法技巧

  • >> more看看其他人的看法
  • You really make it appear really easy along with your presentation but I in finding this matter to be really one thing that I feel I'd
    by no means understand. It kind of feels too complicated and
    extremely broad for me. I'm having a look forward for your subsequent
    publish, I'll try to get the hang of it!

  • 1 htt ... 2017-5-10 15:35 Wednesday
  • }

有什么想说的吗?