记一段圆角阴影效果的CSS

代码如下:

.book{background:#fff;border-radius:5px;box-shadow:0 5px 20px rgba(0, 0, 0, 0.3);margin:20px auto;overflow:hidden;}

效果如下

当然为了能够让人看的清晰一点,阿福把它调大一点好吧,这个看起来没效果?看看http://union.flydon.net 的效果吧,背景效果。非常的不错。

下面让我们来看看这段CSS各句的功能吧:

border-radius:5px;这句就是css3中的圆角特性,5个px的圆角,是不是看到演示效果中的圆角了呢~

box-shadow:0 5px 20px rgba(0, 0, 0, 0.3); 这句呢就是写的盒子中的阴影效果,看到演示里面的效果了么,就是这句完成的~

margin:20px auto;这句呢就是控制上下左右边距的margin了。老实说,阿福在想这个是不是偷懒之举呢,反正这个写着20px的margin是上下的,左右的被auto给取代了,意思是居中(不过貌似效果中不是居中的)

overflow:hidden这句呢是最简单的,隐藏溢出,反正有事没事加上这句总没错~

发表评论

电子邮件地址不会被公开。 必填项已用*标注

嗯,想看到验证码,你得开javascript