css3新特性总结(视觉表现方面)

1.半透明rgba

在rgba出现之前,半透明可以用opacity来创建,可是这样子导致的结果是不仅元素的背景会变透明,标签元素包含的文字也会变透明。这样子会导致可读性降低,所以都会嵌套一个包装标签来创建半透明,这样子很麻烦,自从可以用rgba来表示颜色之后就方便多了。rgba表示方法为:

.rgba{
        background:rgba(255,0,0,0.5);

}

括号里面有是个数字,第一个表示红色,第二个表示绿色,第三个表示蓝色,最后一个表示不透明度。

下面分别用rgba创建半透明和opacity创建半透明(不嵌套包装元素),然后对比结果:

可以看的出来,opacity创建的半透明,文字也会变得透明。

 

2.多背景图background-image

以前backround-image只支持一个图片,现在可以支持多个图片,只要把它们用逗号隔开就行了,格式为:

background: [background-image] [background-position] [background-repeat], 
[background-image] [background-position] [background-repeat], 
[background-image] [background-position] [background-repeat]; 

 

3.背景裁剪background-clip

这个属性包括三个值。

第一种:

.test{
    background-clip:border-box;
    background-color:#0f0;
    background-image:url(path/to/image);
    border:20px dashed #f0c;
    padding:20px;
}

border-box的效果和默认的效果是一样的,都是从border为边界,在内部显示裁剪后的背景。有趣的是,设置border为dashed时,border左上部分的背景颜色为设置的背景颜色。如图:

第二种:

.test{
    background-clip:padding-box;
    background-color:#0f0;
    background-image:url(path/to/image);
    border:20px dashed #f0c;
    padding:20px;
}

padding-box以padding为边界,border将不会有背景颜色。如图:

第三种:

.test{
    background-clip:content-box;
    background-color:#0f0;
    background-image:url(path/to/image);
    border:20px dashed #f0c;
    padding:20px;
}

content-box是在内容区域表现的,如图:

background-clip属性可以和rgba属性结合使用,比如这个边框透明,内容区域不透明的盒子

它完全的代码为:

#test{
    background: green;
    height:222px;
    width:222px;
    text-align:center;
    padding:20px;
    border:20px solid rgba(244,212,0,0.3);
    margin:20px;
    background-clip:padding-box;
    border-radius:15px;
    }

在webkit内核的浏览器上,我们甚至可以实现利用字体裁剪背景图片。如我们想要字体的样子为网格状,可以这样子实现:

#test{
    background:url(test.jpg) no-repeat green;
    height:222px;
    width:222px;
    text-align:center;
    font-size:55px;
    font-weight:bold;
    padding:20px;
    border:20px dashed #f0c;
    margin:20px;
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}

使用的背景图片为:

效果为:

可以看出,如果我们使用的字体越粗,效果越明显,这可以让我们不使用图片就做出一些效果,减少因为图片而导致的http请求。不过这个特性目前只有webkit内核的浏览器支持。

 

4.背景大小缩放:background-size

backgound-size有三种赋值。
第一,数字赋值:

#test{
    background-size:200px 300px;
}

第一个值是背景图片宽度,第二个值是背景图片高度。这是设置为背景图宽度为200px,高度为300px。

第二,适应宽度:

#test{
    background-size:contain;
}

缩放背景图片,使其适应宽度,如图:

第三,适应高度:

#test{
    background-size:cover;
}

缩放图片,使其适应高度,如图:

 

5.渐变:gradient

gradient接受颜色和角度,具体可见代码:

#test{
    height:222px;
    width:222px;
    text-align:center;
    padding:20px;
    border:20px dashed #f0c;
    margin:20px;
    background:-webkit-linear-gradient(180deg,#000 0%,#f00 50%,#ff0 100%);
    background:-moz-linear-gradient(180deg,#000 0%,#f00 50%,#ff0 100%);
    background-clip:padding-box;
}

第一个值为角度,后面的参数为颜色和百分比对应,用空格隔开。该代码的效果为:

gradient默认从上到下渐变,奇怪的是,添加90deg的角度的话,渐变方向不是转90度,而是180度。而角度为180deg时,渐变方向却会转90度。

IE目前不支持gradient。

 

6.阴影:box-shadow和text-shadow

text-shadow和box-shadow都有3个参数。

第一个为水平偏移量,第二个为垂直偏移量,第三个为模糊的像素宽度,第四个为颜色(可用rgba颜色)。

如:text-shadow:5px 3px 4px rgba(0,0,0,0.7);

意思是说,阴影部分向右偏移5px,向下偏移3px,模糊宽度为4px,颜色为黑色,并且不透明度为0.7 。

#test{
    height:222px;
    width:222px;
    text-align:center;
    padding:20px;
    border:20px dashed #f0c;
    margin:20px;
    background:-webkit-linear-gradient(180deg,#000 0%,#f00 50%,#ff0 100%);
    background:-moz-linear-gradient(180deg,#000 0%,#f00 50%,#ff0 100%);
    background-clip:padding-box;
    box-shadow:5px 5px 4px rgba(0,0,0,0.7);
}

效果为:

#test{
    height:222px;
    width:222px;
    text-align:center;
    padding:20px;
    border:20px dashed #f0c;
    margin:20px;
    background:-webkit-linear-gradient(180deg,#000 0%,#f00 50%,#ff0 100%);
    background:-moz-linear-gradient(180deg,#000 0%,#f00 50%,#ff0 100%);
    background-clip:padding-box;
    text-shadow:5px 5px 4px rgba(21,132,22,1);
}

效果为

 

7.变换:transform

值得注意的有三个:skew,rotate和scale。

首先是skew,定义沿着X轴和Y轴的2D倾斜转换。如代码:

#test{
    -webkit-transform:skew(20deg,10deg);
    -moz-transform:skew(20deg,10deg);
    transform:skew(20deg,10deg);
}

效果:

接下来是rotate,rotate接受一个旋转的角度,如代码:

#test{
    -webkit-transform:rotate(30deg);
    -moz-transform:rotate(30deg);
    transform:rotate(30deg);
}

效果为:

最后是scale,定义 2D 缩放转换。接受两个值的时候是分别缩放宽度和高度,接受一个值的时候,高度和宽度都根据该值缩放。

如代码:

#test{
    -webkit-transform:scale(1,0.5);
    -moz-transform:scale(1,0.5);
    transform:scale(1,0.5);
}

效果为:

当然,这三个属性,我们也可以一起用,如代码:

#test{
    -webkit-transform:scale(1,0.5) skew(20deg,10deg) rotate(30deg);
    -moz-transform:scale(1,0.5) skew(20deg,10deg) rotate(30deg);
    transform:scale(1,0.5) skew(20deg,10deg) rotate(30deg);
}

效果为:

 

8.过渡:transition

transition可以实现非常平滑的过渡,最重要的用法就是伪类用法,以前的hover伪类只能实现“瞬间”的变化,有的transition之后,可以实现平滑的过渡了。有设置四个过渡属性:

transition-property:这个属性是设置需要过渡的属性,如color,width等,默认为all,即所有属性都过渡。

transition-duration:过渡所需的时间。

transition-timing-function:过渡方式。ease:匀速,ease-in:加速,ease-out:减速,ease-in-out:先加速再减速。

transition-delay:过渡发生的延迟。

就上例来说,我们可以这样写代码,使其鼠标悬停的时候过渡的变换:

#test:hover{
    -webkit-transform:scale(1,0.5) skew(20deg,10deg) rotate(30deg);
    -moz-transform:scale(1,0.5) skew(20deg,10deg) rotate(30deg);
    transform:scale(1,0.5) skew(20deg,10deg) rotate(30deg);
    }
#test{
    transition-property:all;
    transition-duration:1s;
    transition-timing-function:ease;
    transition-delay:0.1s;
}

我们还以把过渡简写为:

#test{
    transition:all 1s ease 0.1s;
}

 

9动画:animation

动画的主要属性为:

animation-name:名字,关于后续的关键帧的定义。

animation-duration:动画时间。

animation-iteration-count:动画次数,可为数字和infinite(无限次)。

animation-timing-function:动画方式,和transition一样。

这个是一个颜色变换的动画,如代码:

#test{
    height:222px;
    width:222px;
    -webkit-animation-name:changeColor;
    -webkit-animation-duration:6s;
    -webkit-animation-iteration-count:infinite;
    -webkit-animation-timing-function:ease;
    -moz-animation-name:changeColor;
    -moz-animation-duration:6s;
    -moz-animation-iteration-count:infinite;
    -moz-animation-timing-function:ease;
}
@-webkit-keyframes changeColor{
    0%{
        background:#f00;
    }
    25%{
        background:#0f0;
    }
    50%{
        background:#00f;
    }
    75%{
        background:#f0f;
    }
    100%{
        background:#f00;
    }
}

 

posted @ 2014-04-04 01:30  还好我是程序员  阅读(240)  评论(0编辑  收藏