好得很程序员自学网

<tfoot draggable='sEl'></tfoot>

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

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

本教程操作环境:windows7系统、CSS3 && HT ML 5版、Dell G3 电 脑。

在css中,可以利用border属性来设置盒子两像素黑色边框。

border属性在一个声明中设置边框大小(border-width)、边框样式(border -s tyle)和 边框颜色 (border-color)。

示例:

<!DOCTY PE  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定义实线。
do ub le定义双线。双线的 宽 度等于 border-width 的值。
groove定义 3D 凹槽边框。其效果取决于 border-color 的值。
ridge定义 3D 垄状边框。其效果取决于 border-color 的值。
inset定义 3D inset 边框。其效果取决于 border-color 的值。
outset定义 3D outset 边框。其效果取决于 border-color 的值。
inher IT 规定 应该 从父元素继承边框样式。

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

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

这是一种最常用的方法,例如:

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

总结

以上是 为你收集整理的 css怎么设置盒子两像素黑色边框 全部内容,希望文章能够帮你解决 css怎么设置盒子两像素黑色边框 所遇到的问题。

如果觉得 网站内容还不错, 推荐好友。

查看更多关于css怎么设置盒子两像素黑色边框的详细内容...

  阅读:34次