<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
＜meta name="author" content"郭菊鋒,702004176@qq.com"＞
<title>border-radius的兼容寫法大全</title>
<style>
.image{
-webkit-border-image: url(images/news.png) 20/50px 67px 30px 10px repeat stretch;
-moz-border-image: url(images/news.png) 20/50px 67px 30px 10px repeat stretch;
-o-border-image: url(images/news.png) 20/50px 67px 30px 10px repeat stretch;
border-image: url(images/news.png) 20/50px 67px 30px 10px repeat stretch;
/*border-image: url(圖片地址鏈接) slice/width outset repeat;*/
}
/*slice：邊距數值：如果四個一樣，就設置一個即可；如果四個不一樣，就得設置四個，分別對應上右下左*/
/*width：必須與slice之間有一個/號，然后同slice一樣，設置一個值也可，四個也可但要分別對應*/
/*outset（有兩個值跟在width之后，可以都設置為repeat repeat一樣，【這樣的話就是也可以只設置一個值】也可以上下repeat左右stretch不一樣。）{*/
/*topbottom（上下）{repeat(上下平鋪);stretch(上下拉伸),round()}*/
/*leftright（左右）{repeat(左右平鋪);stretch(左右拉伸),round()}*/
/*stretch:默認值*/
/*round:將圖像平鋪顯示，但是如果最后一幅圖不能裝下，會空出位置出來把能裝下的背景圖進行拉伸已達到鋪滿背景的效果 是repeat和stretch的結合.}*/
div.radius{
width:600px;
height: 750px;
padding: 30px;
background-color: rgba(94, 70, 132, 0.87);
color: #fff;
font: 20px "微軟雅黑";
-moz-border-radius-topleft: 12px;
-moz-border-radius-topright: 23px;
-moz-border-radius-bottomright: 34px;
-moz-border-radius-bottomleft: 45px;
-o-border-radius-topleft:12px;
-o-border-radius-topright:23px;
-o-border-radius-bottomright:34px;
-o-border-radius-bottomleft:45px;
-webkit-border-top-left-radius: 12px;
-webkit-border-top-right-radius: 23px;
-webkit-border-bottom-right-radius: 34px;
-webkit-border-bottom-left-radius: 45px;
border-top-left-radius: 12px;
border-top-right-radius: 23px;
border-bottom-right-radius: 34px;
border-bottom-left-radius: 45px;
}
</style>
</head>
<body>
<div class="image">用圖片來做邊框<br />border-image:url( ) 數值/寬度px stretch;</div>
<h1>繪制四個不同的圓角邊框的寫法以及不同的兼容性的寫法大集合</h1>
<div class="radius">
<ul>
<li>順序就是逆時針轉圈</li>
<li></li>
<li>border-radius-topleft:12px;</li>
<li>border-radius-topright:23px;</li>
<li>border-radius-bottomright:34px;</li>
<li>border-radius-bottomleft:45px;</li>
<li></li>
<li>或者上面這個寫法是錯了，雖然書上這么講，但是軟件不這么提示。軟件提示正確（在軟件中更沒有錯誤符號）如下</li>
<li></li>
<li>border-top-left-radiu:12px;</li>
<li>border-top-right-radius:23px;</li>
<li>border-bottom-right-radius:34px;</li>
<li>border-bottom-left-radius:45px;</li>
<li></li>
<li>-moz-border-radius-topleft:12px;</li>
<li>-moz-border-radius-topright:23px;</li>
<li>-moz-border-radius-bottomright:34px;</li>
<li>-moz-border-radius-bottomleft:45px;</li>
<li></li>
<li>-o-border-radius-topleft:12px;</li>
<li>-o-border-radius-topright:23px;</li>
<li>-o-border-radius-bottomright:34px;</li>
<li>-o-border-radius-bottomleft:45px;</li>
<li></li>
<li>-webkit-border-top-left-radius:12px;</li>
<li>-webkit-border-top-right-radius:23px;</li>
<li>-webkit-border-bottom-right-radius:45px;</li>
<li>-webkit-border-bottom-left-radius:34px;</li>
</ul>
</div>
<p>20160810 00:40-xing.org1^</P>
</body>
</html>
1 <!DOCTYPE html> 2 <html lang="zh-cn"> 3 <head> 4 <meta charset="utf-8" /> 5 6 ＜meta name="author" content"郭菊鋒,702004176@qq.com"＞ 7 <title>border-radius的兼容寫法大全</title> 8 <style> 9 .image{ 10 -webkit-border-image: url(images/news.png) 20/50px 67px 30px 10px repeat stretch; 11 -moz-border-image: url(images/news.png) 20/50px 67px 30px 10px repeat stretch; 12 -o-border-image: url(images/news.png) 20/50px 67px 30px 10px repeat stretch; 13 border-image: url(images/news.png) 20/50px 67px 30px 10px repeat stretch; 14 /*border-image: url(圖片地址鏈接) slice/width outset repeat;*/ 15 } 16 /*slice：邊距數值：如果四個一樣，就設置一個即可；如果四個不一樣，就得設置四個，分別對應上右下左*/ 17 /*width：必須與slice之間有一個/號，然后同slice一樣，設置一個值也可，四個也可但要分別對應*/ 18 /*outset（有兩個值跟在width之后，可以都設置為repeat repeat一樣，【這樣的話就是也可以只設置一個值】也可以上下repeat左右stretch不一樣。）{*/ 19 /*topbottom（上下）{repeat(上下平鋪);stretch(上下拉伸),round()}*/ 20 /*leftright（左右）{repeat(左右平鋪);stretch(左右拉伸),round()}*/ 21 /*stretch:默認值*/ 22 /*round:將圖像平鋪顯示，但是如果最后一幅圖不能裝下，會空出位置出來把能裝下的背景圖進行拉伸已達到鋪滿背景的效果 是repeat和stretch的結合.}*/ 23 div.radius{ 24 width:600px; 25 height: 750px; 26 padding: 30px; 27 background-color: rgba(94, 70, 132, 0.87); 28 color: #fff; 29 font: 20px "微軟雅黑"; 30 -moz-border-radius-topleft: 12px; 31 -moz-border-radius-topright: 23px; 32 -moz-border-radius-bottomright: 34px; 33 -moz-border-radius-bottomleft: 45px; 34 -o-border-radius-topleft:12px; 35 -o-border-radius-topright:23px; 36 -o-border-radius-bottomright:34px; 37 -o-border-radius-bottomleft:45px; 38 -webkit-border-top-left-radius: 12px; 39 -webkit-border-top-right-radius: 23px; 40 -webkit-border-bottom-right-radius: 34px; 41 -webkit-border-bottom-left-radius: 45px; 42 border-top-left-radius: 12px; 43 border-top-right-radius: 23px; 44 border-bottom-right-radius: 34px; 45 border-bottom-left-radius: 45px; 46 47 } 48 </style> 49 </head> 50 <body> 51 <div class="image">用圖片來做邊框<br />border-image:url( ) 數值/寬度px stretch;</div> 52 <h1>繪制四個不同的圓角邊框的寫法以及不同的兼容性的寫法大集合</h1> 53 <div class="radius"> 54 <ul> 55 <li>順序就是逆時針轉圈</li> 56 <li></li> 57 <li>border-radius-topleft:12px;</li> 58 <li>border-radius-topright:23px;</li> 59 <li>border-radius-bottomright:34px;</li> 60 <li>border-radius-bottomleft:45px;</li> 61 <li></li> 62 <li>或者上面這個寫法是錯了，雖然書上這么講，但是軟件不這么提示。軟件提示正確（在軟件中更沒有錯誤符號）如下</li> 63 <li></li> 64 <li>border-top-left-radiu:12px;</li> 65 <li>border-top-right-radius:23px;</li> 66 <li>border-bottom-right-radius:34px;</li> 67 <li>border-bottom-left-radius:45px;</li> 68 <li></li> 69 <li>-moz-border-radius-topleft:12px;</li> 70 <li>-moz-border-radius-topright:23px;</li> 71 <li>-moz-border-radius-bottomright:34px;</li> 72 <li>-moz-border-radius-bottomleft:45px;</li> 73 <li></li> 74 <li>-o-border-radius-topleft:12px;</li> 75 <li>-o-border-radius-topright:23px;</li> 76 <li>-o-border-radius-bottomright:34px;</li> 77 <li>-o-border-radius-bottomleft:45px;</li> 78 <li></li> 79 <li>-webkit-border-top-left-radius:12px;</li> 80 <li>-webkit-border-top-right-radius:23px;</li> 81 <li>-webkit-border-bottom-right-radius:45px;</li> 82 <li>-webkit-border-bottom-left-radius:34px;</li> 83 </ul> 84 85 </div> 86 87 <p>20160810 00:40-xing.org1^</P> 88 </body> 89 </html>