周末又折腾了点CSS3的东西，gradient,transform,transition,animation～···本来想大写特写一番，最后觉得其实都是标记属性而已，不值得大写特写。简单做个demo！

chrome查看！

© omiga for omiga, 2011. | Permalink | 5 comments | Add to del.icio.us
Post tags: animation, CSS3, transform, transition

多色边框 colored border

多色边框的创建，目前Firefox支持。颜色显示顺序按定义顺序从内到外。

-moz-border-top-colors:#F80 #F90 #FA0 #FB0 #FC0;
-moz-border-right-colors:#F80 #F90 #FA0 #FB0 #FC0;
-moz-border-bottom-colors:#F80 #F90 #FA0 #FB0 #FC0;
-moz-border-left-colors:#F80 #F90 #FA0 #FB0 #FC0;

不支持-moz-border-colors的写法。

查看演示

图像填充边框 border-image

允许对边框进行图像填充，熟悉PS的应该比较能够容易理解。目前只有Safari支持此属性（下载Safari for windows）。填充方式有平铺方式(round)和伸展方式(strentch)。

-webkit-border-image: url(img/border.gif) 6 6 6 6 round round;

查看演示

圆角边框 border-radius

在CSS2时代圆角边框的设计方法有很多，但是相对来说都比较麻烦，css3彻底解决这一问题。在CSS3圆角边框的构建只需一句简单的CSS代码即可。同时支持对某一个角设置圆角。Firefox，Safari目前均已支持此属性。

-moz-border-radius: 10px;
-webkit-border-radius: 10px;

查看演示

投影 box-shadow

CSS3.info称该属性是css3中最优秀的一个属性(Box-shadow, one of CSS3’s best new features)。该属性的确减少了大量的设计工作，以后的阴影效果只需CSS代码就可实现。该属性有4个参数，第一个数值为投影的水平偏移距离，第二个数值为投影的垂直偏移距离，第三个为投影的模糊范围，最后一个为投影颜色。目前仅Safari支持此属性。

-webkit-box-shadow:10px 10px 10px #888;

查看演示

背景大小 background-size

自定义背景图像的现实尺寸。Opera，Safari和Konqueror皆支持该属性，Firefox不支持。

-o-background-size: 200px 150px;
-webkit-background-size: 200px 150px;
-khtml-background-size: 200px 150px;

查看演示

多重背景 Multiple backgrounds

为对象定义多个背景，各背景之间以逗号分隔。Safari，Konqueror均支持该属性。

background:url(img/bg_1.jpg) left top no-repeat,
url(img/bg_2.jpg) left bottom no-repeat,
url(img/bg_3.jpg) right top no-repeat,
url(img/bg_4.jpg) right bottom no-repeat;

查看演示

文本投影 text-shadow

该属性在CSS2中就被写入，但是目前只有Safari和Opera支持。其语法与box-shadow相似。

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

查看演示

文本溢出 text-overflow

可选属性值：clip，ellipsis，ellipsis-word。该属性在IE6+版本，以及Opera中有较好的支持。

text-overflow:ellipsis;

查看演示

自动换行 word-wrap

该属性本是IE的专用属性，被写入CSS3。主要用于解决长单词的自动换行，可选值normal，break-word。IE，Safari支持该属性，firefox不支持。

word-wrap:break-word;

查看演示

变化尺寸 resize

鼠标拖动改变对象大小。可选值：none | both | horizontal | vertical | inherit。Safari，Konqueror支持。

resize: both;

查看演示

外边框 outline

与outline-offset属性一起使用用于设置对象外边框。Opera，Safari和Firefox均支持该属性。

outline:2px solid #F03;
outline-offset:15px;

查看演示

高级属性选择器 Attribute selectors

属性选择器其实CSS2就有定义，并被用来作为css hack方法，因为IE6及以前版本并不支持属性选择器。CSS3中对属性选择器进行了扩展，其功能引入类似正则表达式模式。目前IE7，Firefox，safari，Opera均支持高级属性选择器。

div[id^="my"]{ color:#C00;}
div[id$="http"]{ color:#00F;}
div[id*="other"]{ color:#000; text-decoration:underline;}
div[id~="other"]{/*------*/}

查看演示

CSS3的新属性还有很多，部分属性目前没有任何浏览器支持，故在此不作讨论。也有部分浏览器已经支持的属性也未涉及，诸如HSL colors，HSLA colors，opacity，RGBA colors，background-origin，background-clip…诸多属性均未言及。本文内容主要参考自CSS3.info以及w3c，在此只为抛砖引玉，小作介绍，详细信息还请移步至上述两网站。

© omiga for omiga, 2007. | Permalink | 4 comments | Add to del.icio.us
Post tags: css, CSS3