CSS3 邊框
通過 CSS3，您能夠創建圓角邊框，向矩形添加陰影，使用圖片來繪製邊框 - 並且不需使用設計軟件，比如 PhotoShop。
border-radius 屬性創建圓角：
<!DOCTYPE html>
<html>
<head>
<title>title</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style>
/**
CSS3 圓角邊框
text-align:center ; 文字居中
border:2px solid #ffff00; 邊框大小 、 邊框黃色
padding:10px 40px; 文字與上下間距、 左右間距
background:#dddddd; div 背景
width:350px; div 寬度
border-radius:25px; 圓角大小
*/
div
{
text-align:center;
border:2px solid #ffff00;
padding:10px 40px;
background:#dddddd;
width:350px;
border-radius:25px;
}
</style>
</head>
<body>
<div>border-radius 屬性允許您向元素添加圓角。</div>
</body>
</html>
CSS3 邊框陰影
box-shadow 用於向方框添加陰影：
<!DOCTYPE html>
<html>
<head>
<title>title</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style>
/**
CSS3 邊框陰影
width:300px; div 寬度
height:100px; div 高度
background-color:#ff0000; div 背景 紅色
box-shadow: 10px 10px 5px #888888; x軸偏移、 y軸偏移 、模糊值 、 陰影顏色
*/
div
{
width:300px;
height:100px;
background-color:#ff0000;
box-shadow: 10px 10px 5px #888888;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
CSS3 邊框圖片
border-image 屬性，您可以使用圖片來創建邊框：
<!DOCTYPE html>
<html>
<head>
<title>title</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style>
/**
CSS3 邊框圖片
border-image-source 用在邊框的圖片的路徑
border-image-slice 圖片邊框向內偏移。
border-image-width; 圖片邊框的寬度
*/
.test{
padding:10px;
border-image-source:url(border.png);
border-image-slice:27;
border-image-width:auto;
}
}
</style>
</head>
<body>
<div class="test">用圖片來做邊框<br />border-image-width:auto;</div>
</body>
</html>
