css怎麼設定盒子兩像素黑色邊框-css教學-PHP中文網

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

青灯夜游

發布： 2023-01-07 11:42:17

原創

7260 人瀏覽過

在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) 使用百分比

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

這是一種最常用的方法，例如：