角屬性border-radius屬性，一個比較簡單但用處很大的一個重要css3屬性，繪制圓形、圓角矩形 、橢圓形。

言

之前在介紹css盒子模型的時候，大概講過邊框border，邊框border是其中一個重要組成部分。本篇將具體介紹邊框的屬性， border 屬性允許您指定元素邊框的樣式、寬度、顏色及圓角。

CSS 邊框樣式

border-style 邊框樣式有以下值：

• dotted - 定義點線邊框
• dashed - 定義虛線邊框
• solid - 定義實線邊框
• double - 定義雙邊框
• groove - 定義 3D 坡口邊框。
• ridge - 定義 3D 脊線邊框。
• inset - 定義 3D inset 邊框。
• outset - 定義 3D outset 邊框。
• none - 定義無邊框
• hidden - 定義隱藏邊框

border-style 屬性可以設(shè)置一到四個值（用于上邊框、右邊框、下邊框和左邊框）。其中3D樣式效果取決與邊框顏色 border-color 值。

如下實例：

CSS 邊框?qū)挾?/h1>

border-width 屬性指定四個邊框的寬度。可以將寬度設(shè)置為特定大小（以 px、pt、cm、em 等），或者使用以下三個預(yù)定義值之一：thin、medium 或 thick。

如下示例：

給不同邊框設(shè)置寬度：

CSS 邊框顏色

border-color 屬性用于設(shè)置四個邊框的顏色，通過以下方式設(shè)置顏色：

• name - 指定顏色名，比如 "red"
• HEX - 指定十六進制值，比如 "#ff0000"
• RGB - 指定 RGB 值，比如 "rgb(255,0,0)"
• HSL - 指定 HSL 值，比如 "hsl(0, 100%, 50%)"
• transparent - 完全透明

注意：如果未邊框?qū)挾葹?時，即使設(shè)置了邊框顏色也不會顯示。

如下示例：

也可分別給每個邊框設(shè)置不同顏色：

按不同方向邊框單獨設(shè)置樣式、寬度、顏色

還可以按照上、右、下、左的順序分別設(shè)置邊框樣式、寬度或顏色。如下示例：

以上寫法等同于以下簡寫法，不同之處就是上面的寫法對元素邊框樣式更精細控制：

p {
  height:100px;
  /*邊框樣式*/
  border-style: dotted solid dotted solid;
  /*邊框?qū)挾?/
  border-width: 2px 5px 10px 20px;
  /*邊框顏色*/
  border-color: red rgb(0,255,0) #ff00ff orange;
}

更精簡的寫法

只使用一個border: style、width、color；設(shè)置邊框樣式。

如下示例：

這種寫法，缺點就是四個邊使用相同的樣式、寬度、顏色，所以當要制作特殊的效果時候，就需要使用以上非簡寫方法。

邊框圓角

border-radius 允許你設(shè)置元素的四個角的圓角大小。語法如下：

border-radius: 左上 右上 右下 左下；

這4個值定義了一個半徑長度，分別表示水平和垂直方向的半徑

你可以設(shè)置一個值，也可以設(shè)置二個或三個。和之前學(xué)習(xí)padding、margin類似，沒有設(shè)置的那個值會以它的對角的值為準。比如以下示例：

以上都是圓形的角，水平和垂直方向半徑相同，如果水平和垂直方向半徑不一樣，不就是橢圓了嗎？

創(chuàng)建橢圓角，語法如下：

border-radius: 水平方向（左上 右上 右下 左下）/ 垂直方向（左上 右上 右下 左下）；

可以用斜杠設(shè)置第二組值。這時，第一組值表示水平半徑，第二組值表示垂直半徑。第二組值也可以同時設(shè)置1到4個值，應(yīng)用規(guī)則與第一組值相同。

如下示例：

現(xiàn)在你會看到，如上圖出現(xiàn)不規(guī)則邊框，是不是很有意思，現(xiàn)在動手試試吧，探索其中的樂趣。

使用邊框制作箭頭

利用border 制作小三角，非常實用，當把寬度和高度設(shè)置為0，看到如下代碼：

 border-width: 40px; 
  border-color: #F00 #0F0 #00F #0FF; 
  border-style: solid; 
  width: 0px; 
  height: 0px;

此時我們只需要將左邊、下邊、右邊的 border 顏色設(shè)置為透明就是我們要的三角形了,如下代碼實現(xiàn)倒三角圖形：

border-color: #F00 transparent transparent transparent;

效果：

如果要其它方向的三角，同理設(shè)置不同方向的顏色為透明就可以了。

一般使用此方法用來制作氣泡效果，非常實用，你不妨試試。

總結(jié)：

1、邊框 border 樣式、寬度、顏色。

2、邊框簡寫方法及按方向分別設(shè)置。

3、邊框圓角分以圓形半徑和橢圓半徑的角。

4、邊框應(yīng)用實例，制作三角形。

邊框在網(wǎng)頁中的應(yīng)用非常廣泛，比如按鈕樣式，氣泡效果，三角形等等。

感謝關(guān)注，祝學(xué)習(xí)愉快。

上篇：前端入門——css顏色和背景

建企業(yè)網(wǎng)站時使用CSS邊框圓角是很容易的事，但要設(shè)置邊框圓角的漸變效果就需要費些功夫了，需要正確理解幾個CSS屬性的含義，background-origin,background-clip,background-size這幾個是必須用到的，調(diào)整好性能的數(shù)值就可以靈活運用了。

想要實現(xiàn)CSS圓角漸變并匹配內(nèi)容背景圖可以參考以下代碼：

<style>
div {
 width: 500px;
 height: 300px;
 margin: 10px;
 padding: 30px;
 border-radius: 50px; /*設(shè)置圓角*/
 border:50px solid transparent; /*設(shè)置邊框顏色透明，確保背景漸變色顯示*/
 background-origin:border-box; /*從邊框開始背景圖*/
 background-clip:padding-box,border-box; /*設(shè)置第一個背景和第二個背景的范圍*/
 background-size:cover;
 /*由于背景圖像不能設(shè)置純色，所以可以使用下面的方式設(shè)置純色*/
 background-image:linear-gradient(#fff, #fff),linear-gradient(#FC0, #F30); 
}
.a1{display:block;height:280px;background-image:url(/images/school.jpg);
background-repeat:no-repeat;background-size:contain;}
</style>

<div>
<span class="a1">邊框漸變色從內(nèi)邊框到邊框，背景圖像單獨設(shè)置不重復(fù)。</span>
</div>

background-origin表示的是背景起始位置，其三個值如下，依次是

border-box 從邊框開始；
padding-box(默認) 從內(nèi)邊距開始；
content-box 從內(nèi)容開始。

background-origin: border-box | padding-box(默認) | content-box

background-clip表示的是背景填充位置，其四個值如下，依次是

border-box(默認) 填充至邊框；
padding-box 填充至內(nèi)邊距；
content-box 填充之內(nèi)容；
text 作為字體前景色。

background-clip: border-box(默認) | padding-box | content-box | text

background-size表示的是背景尺寸，其五個值如下，依次是

contain 將圖像擴大至適應(yīng)最短的邊，剩余部分默認重復(fù)圖像
cover 將圖像擴大至適應(yīng)最長的邊，圖像可能顯示不完整
length 兩個值依次設(shè)置圖像寬和高，未設(shè)置則為auto
percentage 兩個百分比依次設(shè)置圖像寬和高，未設(shè)置則為auto
auto 默認設(shè)置