css 常用邊框屬性
- 概覽
| 參數 | 釋義 |
|---|---|
| border | u設置邊框屬性（可以多個） |
| border-color | 邊框顏色 |
| border-style | 邊框樣式 solid 實線，dotted 點狀線，dashed 虛線 |
| border-width | 邊框粗細 |
| border-left-color | 左邊框顏色（上下左右均可單獨設置） |
| border-left-style | 左邊框樣式（上下左右均可單獨設置） |
| border-left-width | 左邊框高度（上下左右均可單獨設置） |
| border-radius | 圓角處理 |
| box-shadow | 必寫參數：x 軸偏移，y 軸偏移，x 與 y 均接受負值 非必寫參數：模糊度，擴散程度，陰影顏色，內陰影設置 |
- 舉例
- html 部分
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<link rel="stylesheet" type="text/css" href="./static/CSS/test.css">
</head>
<body>
<div class="box1">
<p>
1234567890 <br>
1234567890 <br>
1234567890 <br>
</p>
</div>
<div class="box2">
<p>
abcdefghijklmnopqrstuvwxyz <br>
abcdefghijklmnopqrstuvwxyz <br>
abcdefghijklmnopqrstuvwxyz <br>
</p>
</div>
<div class="box3">
<p>
一二三四五六七八九十 <br>
一二三四五六七八九十 <br>
一二三四五六七八九十 <br>
</p>
</div>
</body>
</html>
- css 部分
*{
width: 80%;
height: 100px;
}
.box1{
border: 3px solid black; /* 多個屬性設置：3px 實線 黑色 */
border-radius: 20px; /* 圓角 */
box-shadow: 10px 10px 5px #888888;
margin-bottom: 15px; /* 設置間距，具體見之后的隨筆 */
}
.box2{
border-width: 3px; /* 單個屬性設置 */
border-style: dotted; /* 點狀線 */
border-top-color: red;
border-bottom-color: blue;
border-left-color: orange;
border-right-color: yellow;
border-radius: 15% 50px; /* 左下右下為 15% 右上左下為 50px */
margin-bottom: 15px;
}
.box3{
border-left-width: 3px;
border-left-style: dashed; /* 虛線 */
border-right: 6px solid; /* 兩個屬性設置 */
border-radius: 15px 30px 45px 60px; /* 左上為起點，順時針走 */
}
- 效果截圖
