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>
    

效果图：

说明：

1、border-style 属性

border-style 属性用于设置元素所有边框的样式，或者单独地为各边设置边框样式。只有当这个值不是 none 时边框才可能出现。

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

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！