css3学习笔记

主要依照http://www.w3schools.com/css3/css3_intro.asp 进行。

1:边框圆角阴影

PropertyDescription
border-image包含多个border-image-* 样式的快捷方式
以图片作为边框,这个要设计好图片,效果像是将border图片从中间扒开圈在目标元素上。

在线演示:
http://www.w3schools.com/cssref/playit.asp?filename=playcss_border-image

自己动手:
http://www.w3schools.com/css3/tryit.asp?filename=trycss3_border-image

border-radius圆角 这个很好用,也非常有用
这个属性配合box-shadow就可以修饰成漂亮的box,再也不需要一堆图片和元素来拼凑了。

其相当于四个属性:

border-top-left-radius
border-top-right-radius

border-bottom-right-radius
border-bottom-left-radius

如果想制造一个古怪的box例如右下角是个方角,则设置为border-bottom-right-radius 0 , 不过这样的古怪box就不能使用box-shadow绘制对应的不规则阴影了。

如果是个等高宽的元素,设置其border-radius:100%;的话,则是个圆形。但是可能会出现这种情况:

Snap1
其样式为:

<style type="text/css"> 
div
{
border:2px solid #a1a1a1;
padding:10px 40px; 
background:#dddddd;
width:50px;
height:50px;
border-radius:100%;
}
</style>

如果设置为像素单位,当大于一个临界点后效果就没什么变化了。

看到没,显示的border只会在实际的盒式模型的border之内。

自己动手:

http://www.w3schools.com/css3/tryit.asp?filename=trycss3_border-radius

box-shadow阴影

好用也实用。

它可以雾化阴影边框

在线演示:

http://www.w3schools.com/cssref/playit.asp?filename=playcss_box-shadow

自己动手:

http://www.w3schools.com/css3/tryit.asp?filename=trycss3_box-shadow


Total views.

© 2013 - 2018. All rights reserved.

Powered by Hydejack v6.6.1