css怎么设置盒子两像素黑色边框-css教程-PHP中文网

css怎么设置盒子两像素黑色边框

青灯夜游

发布： 2021-07-07 16:44:00

原创

7743人浏览过

在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>

登录后复制

效果图：

说明：

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

不建议在网页中使用颜色名，特别是大规模的使用，避免有些颜色名不被浏览器解析，或者不同浏览器对颜色的解释差异。

这是一种最常用的方法，例如：