生活随笔
收集整理的這篇文章主要介紹了
css-边框（border）
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
設置邊框樣式（border-style）
用于定義頁面中邊框的風格，常用屬性：
none：沒有邊框線，即忽略所有邊框的寬度（默認值）
solid：邊框為單實線
dashed：邊框為虛線
dotted：邊框為點線
double：邊框為雙實線
在設置邊框樣式時，既可以對盒子的單邊進行設置，也可以綜合設置四條邊的樣式，常用屬性：
border-top-style：上邊框樣式
border-right-style：右邊框樣式
border-bottom-style：下邊框樣式
border-left-style：左邊框樣式
border- style：上邊框樣式 右邊框樣式 下邊框樣式 左邊框樣式
border- style：上邊框樣式 左右邊框樣式 下邊框樣式
border- style：上下邊框樣式 左右邊框樣式
border- style：上下左右邊框樣式
案例：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>設置邊框樣式</title>
<style type="text/css">h2{border-style: solid
; }.one{border-style: dotted double
; }.two{border-style: dashed dotted solid
;}
</style>
</head><body>
<h2>邊框為單實線</h2>
<p class=
"one">上下邊框為點線。左右邊框為雙實線</p>
<p class=
"two">上邊框虛線、左右邊框點線、下邊框實線</p>
</body>
</html>
注意：點線dotted和虛線dashed樣式存在兼容性問題。實際網頁制作中，通常使用插入背景圖像的形式實現點線或虛線的邊框效果。
2. 設置邊框寬度（border-width）
常用取值單位：像素px，常用屬性：
border-top-width：上邊框寬度
border-right-width：右邊框寬度
border- botttom-width：下邊框寬度
border- left-width：左邊框寬度
border-width：上邊框寬度[右邊框寬度 下邊框寬度 左邊框寬度]
案例：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>設置邊框高度</title>
<style type="text/css">.one{border-width: 6px
;}.two{border-width: 4px 2px
;}.three{border-width: 6px 4px 3px
;}p{border-style: solid
;}
</style>
</head><body>
<p class=
"one">邊框寬度-2px。邊框樣式-單實線。</p>
<p class=
"two">邊框寬度-上下3px，左右1px。邊框樣式-單實線。</p>
<p class=
"three">邊框寬度-上3px，左右1px，下2px。邊框樣式-單實線。</p>
</body>
</html>
注意：在設置邊框時，必須同時設置邊框樣式，如果未設置樣式或設置為none，則不論寬度設置為多少都無效。
3. 設置邊框顏色（border-color）
取值為預定義的顏色值、十六進制#RRGGBB或RGB格式rgb(r,g,b)，實際工作中最常用
的是十六進制#RRGGBB。
邊框的默認顏色為元素本身的文本顏色，對于沒有文本的元素，其默認邊框為父元素的
文本顏色。屬性：
border-top-color:上邊框顏色
border- right-color:右邊框顏色
border-bottom-color:下邊框顏色
border-left-color:左邊框顏色
border- color:上邊框顏色[右邊框顏色 下邊框顏色 左邊框顏色]
案例：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>設置邊框顏色</title>
<style type="text/css">h2{border-style: solid
; border-top-color: #ff0000
; }p{border-style: solid
; border-color: #ccc #ff0000
; }
</style>
</head><body>
<h2>設置邊框顏色</h2>
<p>設置邊框顏色</p>
</body>
</html>
注意：設置邊框顏色時同樣必須設置邊框的樣式，如果未設置樣式或設置為none，則其他邊框屬性無效。
4. 綜合設置邊框
基本格式：border：寬度 樣式 顏色；（寬度 樣式 顏色的順序不分先后，省略部分取默
認值，樣式不能省略）。
案例：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>綜合設置邊框</title>
<style type="text/css">h2{border-top: 3px dashed #243d52
; border-right: 10px double #63abe8
;border-bottom: 5px double #85f2da
;border-left: 10px solid #1a5fad
;}.wangya{border: 15px solid #4a4c5e
; }</style>
</head><body>
<h2>綜合設置邊框</h2>
<img class=
"wangya" src=
"pic1.png" alt=
"網頁平面設計" />
</body>
</html>
```![最后一個案例所需圖片]
(https://img-blog.csdnimg.cn/pic1.png#pic_center
)
總結
以上是生活随笔為你收集整理的css-边框（border）的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
