CSS border-width屬性用法詳解
此屬性用來規定元素邊框的寬度,通俗的講就是boder的"厚度",下面就通過程式碼例項介紹一下此屬性的用法。
一.基本知識:
語法結構:
[CSS] 純文字檢視 複製程式碼border-width:<length> | thin | medium | thick
引數說明:
1.length:通過"5px"這種方式設定邊框寬度。
2.thin:邊框寬度較細。
3.medium:預設值,中等寬度。
4.thick:邊框寬度較寬。
二.引數設定:
border-width可以具有1-4個引數:
1.如果只有一個引數,那麼將應用於四個邊框。
2.如果具有兩個引數,那麼第一個引數用於上線邊框,第二個引數用於左右邊框。
3.如果具有三個引數,那麼第一個用於上邊框,第二個用於左右邊框,第三個用於下邊框。
三.程式碼例項:
[HTML] 純文字檢視 複製程式碼<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> div{ margin:0px auto; height:100px; width:100px; border-style:solid; border-color:red; border-width:10px; } </style> </head> <body> <div></div> </body> </html>
以上程式碼可以將div的四個邊框寬度設定為10px。
[HTML] 純文字檢視 複製程式碼<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> div{ margin:0px auto; height:100px; width:100px; border-style:solid; border-color:red; border-width:10px 20px; } </style> </head> <body> <div></div> </body> </html>
以上程式碼可以將上下邊框的寬度設定為10px,左右邊框的寬度設定為20px。
[HTML] 純文字檢視 複製程式碼<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> div{ margin:0px auto; height:100px; width:100px; border-style:solid; border-color:red; border-width:10px 20px 40px; } </style> </head> <body> <div></div> </body> </html>
以上程式碼可以將上邊框寬度設定為10px,左右邊框寬度為20px,下邊框寬度為40px。
[HTML] 純文字檢視 複製程式碼<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> div{ margin:0px auto; height:100px; width:100px; border-style:solid; border-color:red; border-width:10px 20px 30px 40px; } </style> </head> <body> <div></div> </body> </html>
以上程式碼可以按照上右下左的順序依次設定邊框的寬度。
相關文章
- background屬性用法詳解
- UITableView 屬性用法詳解UIView
- css詳解position五種屬性用法及其含義CSS
- CSS定位屬性詳解CSS
- css display屬性詳解CSS
- CSS字型屬性和文字屬性詳解CSS
- CSS zoom屬性用法CSSOOM
- Android屬性動畫詳解(一),屬性動畫基本用法Android動畫
- fill-opacity屬性用法詳解
- css transition屬性用法介紹CSS
- css border-color屬性用法CSS
- css3中transition屬性詳解CSSS3
- CSS3的content屬性詳解CSSS3
- css box-sizing屬性值詳解(MDN)CSS
- CSS中position屬性( absolute | relative | static | fixed )詳解CSS
- css詳解background八大屬性及其含義CSS
- display屬性詳解
- cookie屬性詳解Cookie
- css文字屬性詳細總結CSS
- css列表屬性詳細總結CSS
- CSS - 定位屬性position使用詳解(static、relative、fixed、absolute)CSS
- css3瀏覽器私有屬性字首使用詳解CSSS3瀏覽器
- CSS 中 display:inline-block 屬性使用詳解CSSinlineBloC
- css顏色屬性詳細總結CSS
- css屬性值語法解讀CSS
- CSS 屬性篇(七):Display屬性CSS
- CSS相容性詳解CSS
- HTML——② HTML 元素、屬性詳解HTML
- z-index屬性詳解Index
- css display 屬性CSS
- CSS perspective 屬性CSS
- CSS transform 屬性CSSORM
- css常用屬性CSS
- css的屬性CSS
- CSS display屬性的表格佈局相關屬性的解釋CSS
- After Effects 圖層屬性及屬性組結構詳解
- Python - __slots__屬性詳解Python
- 屬性配置檔案詳解(2)