CSS（08）邊框與圓角
一、CSS 邊框
CSS邊框屬性允許你指定一個元素邊框的樣式和顏色。
1、邊框樣式:border-style
邊框樣式屬性指定要顯示什麼樣的邊界。
border-style 屬性用來定義邊框的樣式
- none: 預設無邊框
- dotted: 定義一個點線邊框
- dashed: 定義一個虛線邊框
- solid: 定義實線邊框
- double: 定義兩個邊框。 兩個邊框的寬度和 border-width 的值相同
- groove: 定義3D溝槽邊框。效果取決於邊框的顏色值
- ridge: 定義3D脊邊框。效果取決於邊框的顏色值
- inset:定義一個3D的嵌入邊框。效果取決於邊框的顏色值
- outset: 定義一個3D突出邊框。 效果取決於邊框的顏色值
嘗試一下: [設定邊框樣式](https://www.runoob.com/try/try.php?filename=trycss_border-
style)
2、邊框寬度:border-width
您可以通過 border-width 屬性為邊框指定寬度。
為邊框指定寬度有兩種方法：可以指定長度值，比如 2px 或 0.1em(單位為 px, pt, cm, em 等)，或者使用 3 個關鍵字之一，它們分別是
thick 、medium（預設值） 和 thin。
注意： CSS 沒有定義 3 個關鍵字的具體寬度，所以一個使用者可能把 thick 、medium 和 thin 分別設定為等於 5px、3px 和
2px，而另一個使用者則分別設定為 3px、2px 和 1px。
p.one
{
border-style:solid;
border-width:5px;
}
p.two
{
border-style:solid;
border-width:medium;
}
3、邊框顏色:rder-color
border-color屬性用於設定邊框的顏色。可以設定的顏色：
- name - 指定顏色的名稱，如 "red"
- RGB - 指定 RGB 值, 如 "rgb(255,0,0)"
- Hex - 指定16進位制值, 如 "#ff0000"
您還可以設定邊框的顏色為"transparent"。
注意： border-color單獨使用是不起作用的，必須得先使用border-style來設定邊框樣式。
p.one
{
border-style:solid;
border-color:red;
}
p.two
{
border-style:solid;
border-color:#98bf21;
}
4、邊框-單獨設定各邊
在CSS中，可以指定不同的側面不同的邊框：
{
border-top-style:dotted;
border-right-style:solid;
border-bottom-style:dotted;
border-left-style:solid;
}
上面的例子也可以設定一個單一屬性：
border-style:dotted solid;
border-style屬性可以有1-4個值：
-
border-style:dotted solid double dashed;
* 上邊框是 dotted
* 右邊框是 solid
* 下邊框是 double
* 左邊框是 dashed -
border-style:dotted solid double;
* 上邊框是 dotted
* 左、右邊框是 solid
* 下邊框是 double -
border-style:dotted solid;
* 上、底邊框是 dotted
* 右、左邊框是 solid -
border-style:dotted;
* 四面邊框是 dotted
上面的例子用了border-style。然而，它也可以和border-width 、 border-color一起使用。
5、邊框-簡寫屬性
上面的例子用了很多屬性來設定邊框。
你也可以在一個屬性中設定邊框。
你可以在"border"屬性中設定：
- border-width
- border-style (required)
- border-color
border:5px solid red;
二、CSS3 邊框
用 CSS3，你可以建立圓角邊框，新增陰影框，並作為邊界的形象。
在本章中，您將瞭解以下的邊框屬性：
- **** border-image ： 設定所有邊框影象的速記屬性。
- border-radius ： 一個用於設定所有四個邊框- *-半徑屬性的速記屬性
- box-shadow ： 附加一個或多個下拉框的陰影
1、CSS3 圓角:border-radius
在 CSS3 中 border-radius 屬性被用於建立圓角：
這是圓角邊框！
在div中新增圓角元素：
div
{
border:2px solid;
border-radius:25px;
}
2、CSS3 盒陰影:box-shadow
CSS3 中的 box-shadow 屬性被用來新增陰影:
在div中新增box-shadow屬性
div
{
box-shadow: 10px 10px 5px #888888;
}
3、CSS3 邊界圖片:border-image
有了 CSS3 的 border-image 屬性，你可以使用影象建立一個邊框：
border-image 屬性允許你指定一個圖片作為邊框！ 用於建立上文邊框的原始影象：
在 div 中使用圖片建立邊框:
在 div 中使用圖片建立邊框
div
{
border-image:url(border.png) 30 30 round;
-webkit-border-image:url(border.png) 30 30 round; /* Safari 5 and older */
-o-border-image:url(border.png) 30 30 round; /* Opera */
}
三、CSS3 圓角
使用 CSS3 border-radius 屬性，你可以給任何元素製作 "圓角"。IE9以上瀏覽器支援。
CSS3 圓角屬性：
- border-radius ： 所有四個邊角 border---radius 屬性的縮寫
- border-top-left-radius ： 定義了左上角的弧度
- border-top-right-radius ： 定義了右上角的弧度
- border-bottom-right-radius ： 定義了右下角的弧度
- border-bottom-left-radius ： 定義了左下角的弧度
1、CSS3 border-radius 屬性
使用 CSS3 border-radius 屬性，你可以給任何元素製作 "圓角"。
以下為三個例項：
1. 指定背景顏色的元素圓角：
2. 指定邊框的元素圓角:
3. 指定背景圖片的元素圓角:
程式碼如下:
#rcorners1 {
border-radius: 25px;
background: #8AC007;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners2 {
border-radius: 25px;
border: 2px solid #8AC007;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners3 {
border-radius: 25px;
background: url(paper.gif);
background-position: left top;
background-repeat: repeat;
padding: 20px;
width: 200px;
height: 150px;
}
2、CSS3 border-radius - 指定每個圓角
如果你在 border-radius 屬性中只指定一個值，那麼將生成 4 個 圓角。
但是，如果你要在四個角上一一指定，可以使用以下規則：
- 四個值: 第一個值為左上角，第二個值為右上角，第三個值為右下角，第四個值為左下角。
- 三個值: 第一個值為左上角, 第二個值為右上角和左下角，第三個值為右下角
- 兩個值: 第一個值為左上角與右下角，第二個值為右上角與左下角
- 一個值： 四個圓角值相同
以下為三個例項:
1. 四個值 - border-radius: 15px 50px 30px 5px:
2. 三個值 - border-radius: 15px 50px 30px:
3. 兩個值 - border-radius: 15px 50px:
以下為原始碼:
#rcorners4 {
border-radius: 15px 50px 30px 5px;
background: #8AC007;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners5 {
border-radius: 15px 50px 30px;
background: #8AC007;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners6 {
border-radius: 15px 50px;
background: #8AC007;
padding: 20px;
width: 200px;
height: 150px;
}
您還可以建立橢圓邊角:
#rcorners7 {
border-radius: 50px/15px;
background: #8AC007;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners8 {
border-radius: 15px/50px;
background: #8AC007;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners9 {
border-radius: 50%;
background: #8AC007;
padding: 20px;
width: 200px;
height: 150px;
}