html css3属性使用详解:box-shadow

最近一直在忙一些所谓的忙,忙的真的有点忙了,这几天瞎忙里还是觉得要写写下面的这篇文章。大家看看哦——CSS3的一个属性:box-shadow

CSS3 box-shadow是什么?

box-shadow的含义是:阴影,给层元素加上阴影效果、设置块阴影。

CSS3 box-shadow的属性:

box-shadow:阴影类型 X轴位移 Y轴位移 阴影大小 阴影扩展 阴影颜色

即为:box-shadow:apx bpx cpx dpx #color;

其中a指X轴上的位移,b指Y轴上的位移,c指阴影大小,d指阴影的扩张距离,color指阴影颜色。ab可为负值。颜色值可用HEX值,也可使用RGBA值。RGBA值多了一个Alpha透明值,可以用来控制阴影的透明度

阴影类型指的是内阴影(inset)和外阴影,不写默认为外阴影,inset为内阴影效果。写法为:box-shadow:inset apx bpx cpx dpx #color;或者box-shadow:apx bpx cpx dpx #color inset;前后均可。

内阴影的使用

.box1{

box-shadow:0 0 10px #305999;

}

box-shadow

投影,默认的外阴影,10px的阴影大小,无扩展。

.box2{

box-shadow:0 0 10px #305999 inset;

}

box-shadow

在上面的基础上加上20px的扩展

.box3{

box-shadow:0 0 10px 20px #305999;

}

box-shadow

多重阴影效果

box-shadow可以同时使用多次,我们来个四色的阴影。

.box4{

box-shadow:-10px 0 10px red, box-shadow:10px 0 10px blue,box-shadow:0 -10px 10px yellow,box-shadow:0 10px 10px green;

}

box-shadow

使用多个阴影属性的顺序问题

当给同一个元素使用多个阴影属性时,需要注意它的顺序,最先写的阴影将显示在最顶层。比如下面这段代码,我们先写一个10px的绿色阴影,再写一个10px大小但扩展20px的阴影。结果是:绿色阴影层在黄色阴影层之上。

.box5{

box-shadow:0 0 10px red,0 0 10px 20px yellow

}

box-shadow

但如果我们把顺序调一下,像这样

.box6{

box-shadow:0 0 10px 20px yellow,0 0 10px red;

}

box-shadow

我们将看不到后写的绿色阴影层,因为它先写且半径比较大的黄色层覆盖掉了。

颜色使用RGBA值时可使用Alpha透明值。

一下是Alpha半透明的黑色阴影

.box7{

box-shadow:0 0 10px 14px rgba(0,0,0,0.5) inset;

}

box-shadow

一下是使用的HEX值的黑色阴影

.box7{

box-shadow:0 0 10px 14px #000 inset;

}

box-shadow

我们将看不到后写的绿色阴影层,因为它先写且半径比较大的黄色层覆盖掉了。

后结:

打算写这篇文章的时候应该是4月初吧,那知一拖,就是一个多月了,今天想起来就勉强的算是完善下吧,然后发了吧,要不又不知道拖到神马时候了,所以 只能是“粗解”了。其实呢,今天完善的这些差不多都是copy别人的,学习吗,学过来,但是还要自己用,下面就列俩自己当初要写这篇文章时看过的几个不错 的文章吧,尽管自己这次写的与之相比之下差的太多了。

摘要

想想好好写的一个介绍css3的box-shadow的文章,结果却拖了一个多月,服了自己了,稍微完善了下,上吧。。。乖乖。你要勤奋啊….

Top Down