css3学习笔记
主要依照http://www.w3schools.com/css3/css3_intro.asp 进行。
1:边框圆角阴影
| Property | Description |
|---|---|
| border-image | 包含多个border-image-* 样式的快捷方式 以图片作为边框，这个要设计好图片，效果像是将border图片从中间扒开圈在目标元素上。 在线演示: 自己动手： |
| border-radius | 圆角 这个很好用，也非常有用 这个属性配合box-shadow就可以修饰成漂亮的box,再也不需要一堆图片和元素来拼凑了。 其相当于四个属性: border-top-left-radius border-bottom-right-radius 如果想制造一个古怪的box例如右下角是个方角，则设置为border-bottom-right-radius 0 ， 不过这样的古怪box就不能使用box-shadow绘制对应的不规则阴影了。 如果是个等高宽的元素，设置其border-radius:100%;的话，则是个圆形。但是可能会出现这种情况:
<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 |
