前端----HTML/CSS 單邊框
阿新 • • 發佈：2018-12-11
先說下邊框怎麼用:
border-bottom:2px solid red;
3個引數意思分別是 邊框寬度為2px(2畫素),邊框型別為實線,邊框顏色為紅色
<!DOCTYPE html>
<html>
<head>
<style>
p{
border-bottom:2px solid red;
}
</style>
</head>
<body>
<p>測試。</p>
</body>
</html>效果圖:
再介紹border的具體用法:
由上例我們能看出來引數一共有三個:
- 邊框樣式
- 邊框寬度
- 邊框顏色
首先指定邊框,要設定四面的邊框直接用 border:
左邊框就是border-left:
下邊框border-bottom:
右和上是right和top
制定完邊框就要設定引數了,三個引數用空格隔開
邊框寬度屬性
為邊框指定寬度有兩種方法：可以指定長度值，比如 2px 或 0.1em(單位為 px, pt, cm, em 等)，或者使用 3 個關鍵字之一，它們分別是 thick 、medium（預設值） 和 thin。
注意：CSS 沒有定義 3 個關鍵字的具體寬度，所以一個使用者可能把 thick 、medium 和 thin 分別設定為等於 5px、3px 和 2px，而另一個使用者則分別設定為 3px、2px 和 1px。
邊框樣式屬性
指定要顯示什麼樣的邊界。常用的就是solid表示實線.
邊框顏色屬性:
border-color屬性用於設定邊框的顏色。可以設定的顏色：
- name - 指定顏色的名稱，如 "red"
- RGB - 指定 RGB 值, 如 "rgb(255,0,0)"
- Hex - 指定16進位制值, 如 "#ff0000"
您還可以設定邊框的顏色為"transparent"(透明)。
注意： border-color單獨使用是不起作用的，必須得先使用border-style來設定邊框樣式。
這裡的設定語句是簡寫模式,直接設定三個引數,空格隔開,
當然也可以單獨設定某個屬性值,
如下邊框樣式為實線: border-bottom-style: solid;
border是很簡單基礎同時很常用的屬性,今天就多次用到下邊框,效果很好,乍一看還以為是<hr>的橫線,
感覺下邊框的位置更方便控制,更喜歡用下邊框.
文章有對菜鳥教程的引用,貼網址: