首頁 >web前端 >css教學 >css怎麼設定盒子兩像素黑色邊框

css怎麼設定盒子兩像素黑色邊框

青灯夜游
青灯夜游原創
2021-07-07 16:44:007200瀏覽

在css中,可以利用border屬性來設定盒子兩像素黑色邊框,只需要給盒子元素添加“border:2px 邊框樣式值black;”或“border:2px 邊框樣式值#000000;”樣式即可。

css怎麼設定盒子兩像素黑色邊框

本教學操作環境:windows7系統、CSS3&&HTML5版、Dell G3電腦。

在css中,可以利用border屬性來設定盒子兩像素黑色邊框。

border屬性在一個宣告中設定邊框大小(border-width)、邊框樣式(border-style)和邊框顏色(border-color)。

範例:

<!DOCTYPE html>
<html>
	<head>
		<style type="text/css">
			.p1 {
				border: 1px solid black;
			}

			.p2 {
				border: 2px solid black;
			}

			.p3 {
				border: 2px solid #000;
			}

			.p4 {
				border: 2px dotted #000;
			}
		</style>
	</head>

	<body>
		<p class="p1">1像素的黑色实线边框</p>
		<p class="p2">2像素的黑色实线边框</p>
		<p class="p3">2像素的黑色实线边框</p>
		<p class="p4">2像素的黑色点状边框</p>
	</body>

</html>

效果圖:

css怎麼設定盒子兩像素黑色邊框

##說明:

1、border-style 屬性

border-style 屬性用來設定元素所有邊框的樣式,或是單獨地為各邊設定邊框樣式。只有當這個值不是 none 時邊框才可能出現。

值描述#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規定應該從父元素繼承邊框樣式。
2、CSS 顏色

在css中,顏色值可以使用顏色名稱、百分比、數字和十六進位數值,共有四種寫法。

1) 使用顏色名稱

雖然目前已經命名的顏色約有184 種,但真正被各種瀏覽器支持,並且作為CSS 規範推薦的顏色名稱只有16 種,如下表所示。

表1:CSS 規格建議的顏色名稱

/*
名 称	颜 色	名 称	颜 色	名 称	颜 色
black	纯黑	silver	浅灰	navy	深蓝
blue	浅蓝	green	深绿	lime	浅绿
teal	靛青	aqua	天蓝	maroon	深红
red	大红	purple	深紫	fuchsia	品红
olive	褐黄	yellow	明黄	gray	深灰
white	壳白
*/

不建議在網頁中使用顏色名,特別是大規模的使用,避免有些顏色名稱不被瀏覽器解析,或不同瀏覽器對顏色的解釋差異。

不建議在網頁中使用顏色名,特別是大規模的使用,避免有些顏色名稱不被瀏覽器解析,或不同瀏覽器對顏色的解釋差異。

2) 使用百分比

不建議在網頁中使用顏色名,特別是大規模的使用,避免有些顏色名稱不被瀏覽器解析,或不同瀏覽器對顏色的解釋差異。

這是一種最常用的方法,例如:

color: rgb(100%, 100%, 100%);

這個聲明將紅色、藍色、綠色 3 種原色都設為最大值,結果組合顯示為白色。相反,可以設定

rgb(0%, 0%, 0%)為黑色。 3 個百分值相等會顯示灰色,同理哪個百分值大就偏向哪個原色。

3) 使用數值

數字範圍從0~255,例如:

color: rgb(255, 255, 255);

上面這個宣告會顯示白色,相反,可以設定為

rgb(0 , 0, 0),將顯示黑色。 3 個數值相等將顯示灰色,同理哪一個數值大哪個原色的比重就會加大。

4) 十六進位顏色

這是最常用的取色方法,例如:

color: #ffffff;

其中要在十六進位前面加上一個

#顏色符號。上面這個聲明將顯示白色,相反,可以設定#000000為黑色,用RGB 來描述:

color: #RRGGBB;

從0~255,實際上十進制的255 正好等於十六進制的FF,一個十六進制的顏色值等於3 組這樣的十六進制的值,它們按順序連接在一起就等於紅、藍、綠3種原色。

(學習影片分享:

css影片教學

以上是css怎麼設定盒子兩像素黑色邊框的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn