css如何设置盒子两像素黑色边框

2024-04-02 19:55

短信预约 -IT技能 免费直播动态提醒

这篇文章主要介绍“css如何设置盒子两像素黑色边框”，在日常操作中，相信很多人在css如何设置盒子两像素黑色边框问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”css如何设置盒子两像素黑色边框”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

在css中，可以利用border属性来设置盒子两像素黑色边框，只需要给盒子元素添加“border:2px 边框样式值 black;”或者“border:2px 边框样式值 #000000;”样式即可。

本教程操作环境：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	规定应该从父元素继承边框样式。