css3新增样式讲解（css零基础自学教程）

css3新增样式讲解（css零基础自学教程）通过将background-clip设置为padding-clip 边框将变为透明.rgba(0 0 0 0.3)效果如下:div.first{ border:20px solid rgba(0 0 0 0); width:200px;position:absolute; top:50px; left:50px; background-color:red;}效果如下:下面做下改变将rgba(0 0 0 1) 效果如下:

一 透明边框

在元素上设置透明边框会在边框下边显示元素自己的背景.

在下面的例子中 我们使用rgba将边框设置为透明 但实际上它们显示为纯灰色.

css代码:

div.first{ border:20px solid rgba(0 0 0 0); width:200px;position:absolute; top:50px; left:50px; background-color:red;}

效果如下:

下面做下改变将rgba(0 0 0 1) 效果如下:

rgba(0 0 0 0.3)效果如下:

通过将background-clip设置为padding-clip 边框将变为透明.

div.second{ border:20px solid rgba(0 0 0 0.5); -webkit-background-clip:padding-box; background-clip:padding-box; width:100%;position:absolute; background-color:green; }

效果如下:

二 层叠的背景图

css3中支持同时使用多个背景图片.

通过" "逗号分隔可以设置多个背景图.第一个图像将出现在顶部 最后一个在底部.

在下面的例子中 我们使用两个背景图 并指定背景图的位置.

css代码:

div.third{ width:400px; height:300px; background-img:url("background-iamge.jpg") url("before.jpg"); background-position:right top left bottom;

background-repeat:no-repeat;}

我们可以通过使用background简写属性:

background:url("background-image.jpg") right top no-repeat url("before.jpg") left bottom no-repeat;

三 opacity属性

css中的opacity属性支持为元素增加一个不透明度.

下面对同一张图片设置多种不同的不透明度.

css代码:

.img1{ opacity:1;}

.img2{ opacity:0.5;}

.img3{ opacity:.25;}

效果如下:

opacity的值介于(0.0~1.0)之间.0.0表示完全透明 1.0表示完全不透明

要让opacity兼容所有的ie版本 要使用:filter:alpha(opacity=x)以及opacity属性.x可以取值:0~100.

x设置为0 表示完全透明 1表示完全不透明.

下边的例子中 设置元素的透明度为20%;

格式如下:

filter:alpha(opacity=20);

opacity:0.2;

alpha过滤器是一个仅限Microsoft的属性 不是标准的css属性.