CSS3圓角邊框和邊界圖片效果執行個體分享

本文的學習要點如下：

•圓角 border-radius
•盒陰影 box-shadow
•邊界圖片 border-image

1.圓角 border-radius

<div>border-radius 屬性允許您為元素添加圓角邊框！ </div>    div {       width: 200px;       height: 100px;       padding:20px;       border: 1px solid red;       border-radius : 25px;      }

2.盒陰影 box-shadow

<div></div>    div {       width: 200px;       height: 100px;       background: red;       /*x軸位移量 y軸位移量 模糊程度 陰影顏色*/       box-shadow: 10px 10px 5px #000;   }

3.邊界圖片 border-image

html部分

<p><b>注意: </b> Internet Explorer 不支援 border-image 屬性。</p>  <p> border-image 屬性用於設定圖片的邊框。</p>    <div id="round">這裡，映像平鋪（重複）來填充該地區。</div>  <br>  <div id="stretch">這裡，映像被展開以填充該地區。</div>    <p>這是我們使用的圖片素材：</p>  <img src="images/border.png" />

css部分

div {       width: 250px;       padding: 10px 20px;       border: 15px solid translate;   }   #round {       /*safari*/      /*圖片源 圖片邊界向內位移量 圖片的寬度 用於指定在邊框外部繪製 border-image-area 的量  樣式*/      -webkit-border-image : url(../images/border.png) 30 30 round;       /*opera*/      -o-border-image : url(../images/border.png) 30 30 round;       border-image : url(../images/border.png) 30 30 round;   }     #stretch {       -webkit-border-image : url(../images/border.png) 30 30 stretch;       -o-border-image : url(../images/border.png) 30 30 stretch;       border-image : url(../images/border.png) 30 30 stretch;   }