關於css3的邊框的border-radius和border-image用法的詳解

時間 2019-12-01

標籤關於 css3 css 邊框 border radius image 用法詳解欄目 CSS 简体版

原文原文鏈接

1、圓角邊框：IE9.0之前版本不支持

border-radius: 接受8個屬性，前四個爲x軸，後四個爲y軸，以斜槓劃分x軸、y軸，即border-radius:左上較右上角右下角左下角 / 左上角右上角右下角左下角 ;（x軸/y軸），如：border-radius: 100px 0 100px 0/100px 0 100px 0。

順序圖：

原理圖：

原理：

以四個角a，b，c，d 爲起點，橫向爲x軸，縱向爲y軸，以左上角x軸100px，y軸100px兩點之間爲弧，四個角交點爲圓心的的四分之一圓，一樣右下角也是，即border-radius: 100px 0 100px 0/100px 0 100px 0。

效果一：

代碼：

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4 <meta charset="UTF-8">
 5 <title>Document</title>
 6 <style type="text/css">
 7 .div1{
 8 width: 200px;
 9 height: 200px;
10 background-color: red;
11 border-radius: 100px 0 100px 0/100px 0 100px 0;
12 }
13 </style>
14 </head>
15 <body>
16 <div class="div1"></div>
17 </body>
18 </html>

View Code

效果二：

原理：

左下角x軸50px,y軸50px;border-radius: 0 0 0 50px/0 0 0 50px;

代碼：

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4 <meta charset="UTF-8">
 5 <title>Document</title>
 6 <style type="text/css">
 7 .div1{
 8 width: 200px;
 9 height: 200px;
10 background-color: red;
11 border-radius: 0 0 0 50px/0 0 0 50px;
12 }
13 </style>
14 </head>
15 <body>
16 <div class="div1"></div>
17 </body>
18 </html>

View Code

效果三：

原理：

div寬度200px,高度100px,四個角x軸100px,y軸50px,即border-radius: 100px/50px;

代碼：

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4 <meta charset="UTF-8">
 5 <title>Document</title>
 6 <style type="text/css">
 7 .div1{
 8 width: 200px;
 9 height: 100px;
10 background-color: red;
11 border-radius: 100px/50px;
12 }
13 </style>
14 </head>
15 <body>
16 <div class="div1"></div>
17 </body>
18 </html>
19

View Code

效果四：

原理：

以100px爲半徑：border-radius: 100px，給圓添加100px的border：border:100px solid #ccc，再把要空缺的部分顏色變透明：border-right: 100px solid transparent。

代碼:

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4 <meta charset="UTF-8">
 5 <title>Document</title>
 6 <style type="text/css">
 7 .div1{
 8 width: 0px;
 9 border-radius: 100px;
10 border:100px solid #ccc;
11 border-right: 100px solid transparent;
12 }
13 </style>
14 </head>
15 <body>
16 <div class="div1"></div>
17 </body>
18 </html>

View Code

2、圖像邊框：IE9.0及如下均不支持

border-image:url() 該屬性用於指定邊框寬度（上右下左）背景圖的填充方式（[ stretch | repeat | round ]默認值：stretch ）

）

stretch：指定用拉伸方式來填充邊框背景圖。

repeat：指定用平鋪方式來填充邊框背景圖。當圖片碰到邊界時，若是超過則被截斷。

round：指定用平鋪方式來填充邊框背景圖。圖片會根據邊框的尺寸動態調整圖片的大小直至正好能夠鋪滿整個邊框。

如：border-image: url(1.png) 49% repeat; border-image: url(1.png) 125 202 166 166 round;

例子：

使用的背景圖：

效果一：

原理：

上下左右各以166px的距離分割成九塊，a，b，c，d四塊分別爲div的四個角，且每一個角的背景圖大小會自適應爲border的大小，而後兩個角之間的背景圖根據div的boder除去四個角的大小進行拉伸。

代碼：

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4 <meta charset="UTF-8">
 5 <title>Document</title>
 6 <style type="text/css">
 7 div{
 8 height: 300px;
 9 width: 300px;
10 border-width: 50px;
11 border-image: url(1.png) 166 round;
12 background: #ccc;
13 }
14 </style>
15 </head>
16 <body>
17 <div></div>
18 </body>
19 </html>

View Code

效果二：

原理：

對背景圖上下左右進行100%的切割，即div四個角爲整張背景圖，因爲切割超過50%，兩個角之間的背景圖沒有重合部分，因此border-image沒法進行拉伸。

代碼：

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4 <meta charset="UTF-8">
 5 <title>Document</title>
 6 <style type="text/css">
 7 div{
 8 height: 300px;
 9 width: 300px;
10 border-width: 50px;
11 border-image: url(1.png) 100% round;
12 background: #ccc;
13 }
14 </style>
15 </head>
16 <body>
17 <div></div>
18 </body>
19 </html>