一,圆角
使用border-radius。border-radius: 5px 4px 3px 2px; /* 四个半径值分别是左上角、右上角、右下角和左下角,顺时针 */
实心圆
方法:把宽度(width)与高度(height)值设置为一致(也就是正方形),并且四个圆角值都设置为它们值的一半。如下代码:
div{
height:100px;/*与width设置一致*/
width:100px;
background:#9da;
border-radius:50px;/*四个圆角值都设置为宽度或高度值的一半*/
}
实心上半圆
方法:把高度(height)设为宽度(width)的一半,并且只设置左上角和右上角的半径与元素的高度一致(大于也是可以的)
div{
height:50px;/*是width的一半*/
width:100px;
background:#9da;
border-radius:50px 50px 0 0;/*半径至少设置为height的值*/
}
实心左半圆
div{
height:100px;
width:50px;
background:#9da;
border-radius:50px 0 0 50px;
}
二,阴影
box-shadow:x轴偏移量 y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式] 带[]都是可选的
<offset-x>和<offset-y>分别是x轴偏移量和y轴偏移量,1.如果投影方式是外投影:x轴偏移量如果是负值位于元素左边,y轴偏移量如果是负值位于元素上面,2.如果投影方式是内投影:x轴偏移量如果是负值位于元素右边,y轴偏移量是负值位于元素下方,3.如果x,y轴偏移量都是0那阴影就在元素后面,如果这时候设置了模糊半径和扩展半径,那就有模糊效果
<blur-radius>是第三个参数。值越大模糊面积越大,阴影越大越淡,不能位负值,可以为0,默认为0,此时阴影边缘锐利
<spread-radius>是第四个参数。正值时阴影扩大,负值时阴影缩小,默认0,此时阴影和元素一般大
<color>是第五个参数,默认黑色
inset 可以写在参数的第一个或最后一个,其它位置是无效的。
三,边框应用图片
http://img.mukewang.com/52e22a1c0001406e03040221.jpg
<div id="border_image">
请为我镶嵌上漂亮的画框吧
</div>
#border_image
{
margin:0 auto;
height:100px;
line-height:100px;
text-align:center;
font-size:30px;
width:450px;
border:15px solid #ccc; /*一定要*/
border-image:url('http://img.mukewang.com/52e22a1c0001406e03040221.jpg') 15 repeat;/*一定要 这里是15不是15px */
}