border屬性介紹 屬性設置元素邊框。 邊框 個要素如：粗細、線型、顏色。 邊框線型屬性值說明表如： 屬性指| 描述 | none |定義無邊框。 hidden |與 "none" 相同。不過應用於表時除外，對於表，hidden 用於解決邊框衝突。 dotted |定義點狀邊框。在大多數瀏覽器中呈 ...
border屬性介紹
border屬性設置元素邊框。- 邊框
3個要素如：粗細、線型、顏色。
邊框線型屬性值說明表如：
| 屬性指 | 描述 |
|---|---|
| none | 定義無邊框。 |
| hidden | 與 "none" 相同。不過應用於表時除外，對於表，hidden 用於解決邊框衝突。 |
| dotted | 定義點狀邊框。在大多數瀏覽器中呈現為實線。 |
| dashed | 定義虛線。在大多數瀏覽器中呈現為實線。 |
| solid | 定義實線。 |
| double | 定義雙線。雙線的寬度等於 border-width 的值。 |
| groove | 定義 3D 凹槽邊框。其效果取決於 border-color 的值。 |
| ridge | 定義 3D 壟狀邊框。其效果取決於 border-color 的值。 |
| inset | 定義 3D inset 邊框。其效果取決於 border-color 的值。 |
| outset | 定義 3D outset 邊框。其效果取決於 border-color 的值。 |
| inherit | 規定應該從父元素繼承邊框樣式。 |
邊框方向屬性值說明表如：
| 屬性 | 描述 |
|---|---|
| border-top | 設置元素上邊框。 |
| border-bottom | 設置元素下邊框。 |
| border-left | 設置元素左邊框。 |
| border-right | 設置元素右邊框。 |
邊框實踐
- 實踐代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>邊框</title>
<style>
.box{
width: 200px;
height: 100px;
border: 1px solid red;
}
</style>
</head>
<body>
<div class="box">
微笑是最初的信仰
</div>
</body>
</html>- 結果圖
註意：邊框顏色可以省略不寫，預設為黑色。如果其他2個屬性不寫就不會顯示邊框。
- 設置元素邊框方向實踐
代碼塊
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>邊框</title>
<style>
.box{
width: 200px;
height: 100px;
border-top: 2px double red;
border-bottom: 2px ridge lawngreen;
border-left: 2px inset darkorange ;
border-right:2px groove darkblue;
}
</style>
</head>
<body>
<div class="box">
微笑是最初的信仰
</div>
</body>
</html>結果圖
display屬性介紹
display屬性它是顯示的意思，display屬性可以將行內元素與塊級元素之間相互轉換，將隱藏的元素設置顯示狀態或將顯示的元素設置隱藏狀態。display屬性值說明表如下：
| 屬性值 | 描述 |
|---|---|
| inline | 將塊級元素轉換為行內元素。 |
| block | 作用：1、將行內元素轉換為塊級元素。2、將隱藏的元素設置為顯示狀態。 |
| none | 將顯示的元素設置為隱藏狀態。 |
display屬性實踐
- 使用
display屬性的屬性值為block將span標簽設置寬高度並且設置一個背景顏色。 代碼塊
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>將span標簽轉換為塊級元素</title>
<style>
.box{
width: 200px;
height: 100px;
display: block;
background-color: red;
}
</style>
</head>
<body>
<span class="box">微笑是最初的信仰</span>
</body>
</html>結果圖
註意：如果行內元素使用了
display: block;，就擁有了塊級元素特點。使用
display屬性的屬性值為inline將h1標簽轉換為行內元素。代碼塊
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>將h1標簽轉換為行內元素</title>
<style>
.box{
width: 200px;
height: 100px;
display: inline;
background-color: red;
}
</style>
</head>
<body>
<h1 class="box">微笑是最初的信仰</h1>
</body>
</html>結果圖
註意：如果塊級元素使用了
display: inline;，就擁有了行內元素特點。
