css3特性选段

浏览器专有属性

Webkit核心浏览器：-webkit-

Gecko核心浏览器：-moz-

Konqueror：-khtml-

Opera：-o-

IE8：-ms-

选择器

种类繁多，已经有人总结了。偷个懒，贴个链接：http://www.ruanyifeng.com/blog/2009/03/css_selectors.html

RGBA和透明度

rgba(164,173,183,.15)

opacity:0.8

RGBA和opacity之间的不同时前者只会应用到指定的元素上，而后者会影响我们指定的元素及其子元素

多栏布局

不用使用多个div标签实现多栏布局，直接利用css。

div{
  -webkit-column-count:4;
  -webkit-column-gag:20px;
  -webkit-column-rule:1px solid #000;
}

column-count（栏数）、column-width（栏宽）、column-gap（栏间距）、column（栏分隔符）、column-break-after、column-break-before、column-span、column-fill

多背景图

div {
    background: url(example.jpg) top left no-repeat,
    url(example2.jpg) bottom left no-repeat,
    url(example3.jpg) center center repeat-y;
}

Word Wrap

word-wrap防止太长的字符串溢出。normal只在允许的断点截断文字。break-word可以在任何需要截断的地方进行截断。

文字阴影

p{text-shadow:rgba(0,0,0,.8) 0 1px 0,red -4px -4px 2px;}

属性分别是：颜色，x坐标，y坐标，模糊半径。

@font-face属性

@font-face{
    font-family: 'DroidSans';
    src: url('../fonts/DroidSans.ttf') format('truetype');
}

p {
    font-family: "DroidSans";
}

圆角（边框半径）

 

h2 span {
    color: #1a1a1a;
    padding: .5em;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    -khtml-border-radius: 6px;
    border-radius: 6px;
}

可以分别定义4个角的半径。

边框图片

div {
    border-top-image: url(example.png) 5 5 stretch;
    border-right-image: url(example.png) 5 5 stretch;
    border-bottom-image: url(example.png) 5 5 stretch;
    border-left-image: url(example.png) 5 5 stretch;
    border-top-left-image: url(example.png) 5 5 stretch;
    border-top-right-image: url(example.png) 5 5 stretch;
    border-bottom-left-image: url(example.png) 5 5 stretch;
    border-bottom-right-image: url(example.png) 5 5 stretch;
}

可以定义每个角使用不同的图片，如果是合并在一起

顺序为 上 右 下 左 。

div { 
   border-image: url(example.png) 18 25 25 18 stretch repeat;  
}

该属性的最后一个值可以是stretch (默认), round (只有一个平铺了整数倍的图片被填充在允许的地方) 或repeat。如果我们只想顶部和底部边框被拉伸，我们可以使用上面的CSS

盒阴影

#navigation {
    -webkit-box-shadow: 0 0 10px #000;
    -moz-box-shadow: 0 0 10px #000;
    }
    #navigation li a:hover,
    #navigation li a:focus {
    -webkit-box-shadow: 0 0 5px #111;
    -moz-box-shadow: 0 0 5px #111;
}

属性分别是：水平偏移、垂直偏移、模糊半径、伸展半径、阴影颜色。

盒子大小

textarea {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}

div{
     box-sizing: content-box;
}

border-box：从设定的宽度和高度中扣除padding和border的大小。

content-box：按照CSS2.1中默认样式渲染宽度。

媒体查询

#sidebar {
    float: right;
    display: inline; /* IE Double-Margin Bugfix */
    }

@media all and (max-width:480px) {
    #sidebar {
        float: none;
        clear: both;
        }
    }
a {
    color: grey;
}

@media screen and (color) {
    a {
        color: red;
        }
    }

无需js来确定用户使用的浏览器的属性和功能，让布局对于用户的浏览器分辨率更加灵活。IE目前不支持这些属性。

语音

h2 {
    voice-family: female;
    voice-balance: left;
    voice-volume: soft;
    cue-after: url(sound.au);
    }

支持的很少。