一、基本邊框樣式
邊框是CSS樣式中經常使用的屬性之一，用來為元素周圍添加樣式，豐富頁面效果。border屬性常用來定義元素的邊框樣式，其基本用法為：
.selector {
border: [邊框寬度] [邊框樣式] [邊框顏色];
}
例如下面代碼展示了一種基本的邊框樣式：
.container {
border: 1px solid #000;
padding: 20px;
text-align: center;
background-color: #fff;
}
該代碼定義了一個容器，設置了1px寬度，實線樣式，黑色顏色的邊框，同時還為容器添加了20px的內邊距、居中對齊和白色背景。
二、不同邊框樣式
除了基本的實線邊框，border屬性還能設置多種不同的邊框樣式。下面是一些常用的邊框樣式：
- solid：實線邊框
- dashed：虛線邊框
- dotted：點狀邊框
- double：雙線邊框
- groove：凹槽邊框
- ridge：壟狀邊框
- inset：內嵌邊框
- outset：外嵌邊框
例如下面代碼展示了幾種不同的邊框樣式：
.container {
padding: 20px;
text-align: center;
background-color: #fff;
}
.border1 {
border: 1px solid #000;
}
.border2 {
border: 1px dashed #f00;
}
.border3 {
border: 1px dotted #0f0;
}
.border4 {
border: 1px groove #00f;
}
.border5 {
border: 1px ridge #f0f;
}
.border6 {
border: 1px double #ff0;
}
.border7 {
border: 1px outset #0ff;
}
.border8 {
border: 1px inset #888;
}
分別定義了8個容器，設置了不同的邊框樣式，效果如下：
實線邊框
原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-hant/n/309607.html
微信掃一掃 
支付寶掃一掃 