CSS3邊框

1、圓角效果 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;
}

效果圖：

圖片9.jpg

Y軸偏移量爲負數：

.boxshadow-outset{
   width:100px;
   height:100px;
   box-shadow:4px -4px 6px #666;
}

效果圖：

圖片10.jpg

3、爲邊框應用圖片 border-image

顧名思義就是爲邊框應用背景圖片，它和我們常用的background屬性比較相似。

例如：

background:url(xx.jpg) 10px 20px no-repeat;

但是又比背景圖片複雜一些。

圖片11.jpg

根據border-image的語法：

圖片12.jpg

#border-image{
   background:#F4FFFA;
   width:210px; height:210px; border:70px solid #ddd;
   border-image:url(borderimg.png) 70 repeat  
}

圖片13.jpg

邊角部分爲裁掉了，可見repeat就是一直重複，然後超出部分剪裁掉，而且是居中開始重複。

Round 參數：Round可以理解爲圓滿的鋪滿。爲了實現圓滿所以會壓縮（或拉伸）；

#border-image {
   width:170px;
   height:170px;
   border:70px solid;
   border-image:url(borderimg.png) 70 round;
 }

圖片14.jpg

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>