1、圆角效果 border-radius
border-radius是向元素添加圆角边框。
border-radius是向元素添加圆角边框。
使用方法:
border-radius:10px; /* 所有角都使用半径为10px的圆角 */
border-radius: 5px 4px 3px 2px; /* 四个半径值分别是左上角、右上角、右下角和左下角,顺时针 */
不要以为border-radius的值只能用px单位,你还可以用百分比或者em,但兼容性目前还不太好。
实心上半圆:
方法:把高度(height)设为宽度(width)的一半,并且只设置左上角和右上角的半径与元素的高度一致(大于也是可以的)。
div{ height:50px;/*是width的一半*/ width:100px; background:#9da; border-radius:50px 50px 0 0;/*半径至少设置为height的值*/ }
实心圆:
方法:把宽度(width)与高度(height)值设置为一致(也就是正方形),并且四个圆角值都设置为它们值的一半。如下代码:
div{ height:100px;/*与width设置一致*/ width:100px; background:#9da; border-radius:50px;/*四个圆角值都设置为宽度或高度值的一半*/ }
index.html代码:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>border-radius</title> <style type="text/css"> div.circle{ height:100px;/*与width设置一致*/ width:100px; background:#9da; border-radius:50px;/*四个圆角值都设置为宽度或高度值的一半*/ } /*任务部分*/ div.semi-circle{ height:100px; width:50px; background:#9da; border-radius:50px 0 0 50px; } </style> </head> <body> <div class="circle"> </div> <br/> <!--任务部分--> <div class="semi-circle"> </div> </body> </html>
2、阴影 box-shadow
box-shadow是向盒子添加阴影。支持添加一个或者多个。
实现投影效果:
box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式];
值 | 描述 |
X轴偏移量 | 必需。水平阴影的位置。允许负值。 |
Y轴偏移量 | 必需。垂直阴影的位置。允许负值。 |
阴影模糊半径 | 可选。模糊距离。 |
阴影扩展半径 | 可选。阴影的尺寸。 |
阴影颜色 | 可选。阴影的颜色。省略默认为黑色。 |
投影方式 | 可选。(设置inset时为内部阴影方式,如果省略为外阴影方式 )。 |
注意:inset 可以写在参数的第一个或最后一个,其它位置是无效的。
为元素设置外阴影:
示例代码:
.box_shadow{ box-shadow:4px 2px 6px #333333; }
效果:
为元素设置内阴影:
示例代码:
.box_shadow{ box-shadow:4px 2px 6px #333333 inset; }
效果:
添加多个阴影:
以上的语法的介绍,就这么简单,如果添加多个阴影,只需用逗号隔开即可。如:
.box_shadow{ box-shadow:4px 2px 6px #f00, -4px -2px 6px #000, 0px 0px 12px 5px #33CC00 inset; }
效果:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>boxshadow</title> <style> .boxshadow-outset{ width:100px; height:100px; box-shadow:4px 4px 6px #666; } .boxshadow-inset{ width:100px; height:100px; box-shadow:4px 4px 6px #666 inset; } .boxshadow-multi{ width:100px; height:100px; box-shadow:4px 2px 6px #f00, -4px -2px 6px #000, 0px 0px 12px 5px #33CC00 inset; } </style> </head> <body> <h2>外阴影</h2> <div class="boxshadow-outset"> </div> <br /> <h2>内阴影</h2> <div class="boxshadow-inset"> </div> <br /> <h2>多阴影</h2> <div class="boxshadow-multi"> </div> </body>CSS3边框 </html>
阴影模糊半径与阴影扩展半径的区别
阴影模糊半径:此参数可选,其值只能是为正值,如果其值为0时,表示阴影不具有模糊效果,其值越大阴影的边缘就越模糊;
阴影扩展半径:此参数可选,其值可以是正负值,如果值为正,则整个阴影都延展扩大,反之值为负值时,则缩小;
X轴偏移量和Y轴偏移量值可以设置为负数
box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式];
X轴偏移量为负数:
.boxshadow-outset{ width:100px; height:100px; box-shadow:-4px 4px 6px #666; }
效果图:
Y轴偏移量为负数:
.boxshadow-outset{ width:100px; height:100px; box-shadow:4px -4px 6px #666; }
效果图:
3、为边框应用图片 border-image
顾名思义就是为边框应用背景图片,它和我们常用的background属性比较相似。
例如:
background:url(xx.jpg) 10px 20px no-repeat;
但是又比背景图片复杂一些。
根据border-image的语法:
#border-image{ background:#F4FFFA; width:210px; height:210px; border:70px solid #ddd; border-image:url(borderimg.png) 70 repeat }
边角部分为裁掉了,可见repeat就是一直重复,然后超出部分剪裁掉,而且是居中开始重复。
Round 参数:Round可以理解为圆满的铺满。为了实现圆满所以会压缩(或拉伸);
#border-image { width:170px; height:170px; border:70px solid; border-image:url(borderimg.png) 70 round; }
border-image:url(borderimg.png) 70 stretch
<!doctype html> <html> <head> <meta charset="utf-8"> <title>边框图片</title> <style> #border_image { margin:0 auto; height:100px; line-height:100px; text-align:center; font-size:30px; width:450px; border:60px solid #ccc; border-image:url(http://img.mukewang.com/52e22a1c0001406e03040221.jpg) 70 stretch } </style> </head> <body> <div id="border_image"> 请为我镶嵌上漂亮的画框吧 </div> </body> </html>