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

程序员文章站 2022-04-04 22:25:30

...

在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怎么设置盒子两像素黑色边框的详细内容，更多请关注其它相关文章！