CSS3中的一些属性

　　　　

1、可匹配部分字符串

1    /*^运算符，匹配字符串首部*/
2     a[href^='http://website'] 
3     /*$运算符，匹配字符串尾部*/
4     a[href$='.png']
5     /* *运算符 匹配任意位置的子字符串*/
6     a[href*='google']

2. box-sizing属性

可使用box-sizing属性选择盒子模型：border-box; content-box(默认); padding-box

CSS3背景提供了 两个新属性：background-clip 和 background-origin，用来指定背景在元素中的开始位置，以及如何对背景进行裁剪。其都支持上面三个属性值

1    /*背景可以在元素的所有部分和边框外边缘的所有部位进行显示*/
2     background-clip: border-box;
3     /*背景只出现在空白域外边缘内的元素区域中*/
4     background-clip: padding-box;
5     /*背景只在元素内容区域内显示*/
6     background-clip: content-box;

background-origin指定背景图片在左上角的开始位置。也具有border-box; padding-box 和 content-box三个属性。但是：如果背景图像的 background-attachment 属性为 "fixed"，则该属性没有效果。

 

3. CSS3多栏布局 

　　因为是使用chrome浏览器测试，所以没有加火狐和ie等其他的兼容。对应要有-moz-* 和 *

    .columns{
        text-align: justify;
        height: auto;
        -webkit-column-count:3;     //列数
        -webkit-column-gap:1em;     //两列之间的间距
        -webkit-column-rule:1px solid red;         //间隙里的边界线
    }

 

posted on 2016-08-05 20:42  杠子  阅读(1183)  评论(0)  编辑  收藏  举报

导航