css怎么设置边框颜色

2024-04-02 19:04:59 462人浏览独家记忆

摘要

这篇文章主要介绍“CSS怎么设置边框颜色”，在日常操作中，相信很多人在css怎么设置边框颜色问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”css怎么设置边框颜色”的疑惑有所帮

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

在css中，可以利用border-color、border-top-color、border-bottom-color、border-left-color、border-right-color属性来设置元素的边框颜色。

本教程操作环境：windows7系统、css3&&HTML5版、Dell G3电脑。

css设置边框颜色的属性

属性	描述
border-bottom-color	设置一个元素的底部边框颜色。
border-left-color	设置一个元素象的左边边框颜色。
border-right-color	设置一个元素的右边边框颜色。
border-top-color	设置一个元素的顶部边框颜色
border-color	设置一个元素的四个边框颜色。

border-color属性是一个简写属性，可以在一个声明中设置四个边框颜色，可设置 1 到 4 种颜色。

该属性可设置一个元素的所有边框中可见部分的颜色，或者为 4 个边分别设置不同的颜色。

实例：

border-color:red green blue pink;

上边框是红色
右边框是绿色
下边框是蓝色
左边框是粉色

border-color:red green blue;

上边框是红色
右边框和左边框是绿色
下边框是蓝色

border-color:dotted red green;

上边框和下边框是红色
右边框和左边框是绿色

border-color:red;

所有 4 个边框都是红色

示例1：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<style>
p.one
{
	border-style:solid;
	border-color:#0000ff;
}
p.two
{
	border-style:solid;
	border-color:#ff0000 #0000ff;
}
p.three
{
	border-style:solid;
	border-color:#ff0000 #00ff00 #0000ff;
}
p.four
{
	border-style:solid;
	border-color:#ff0000 #00ff00 #0000ff rgb(250,0,255);
}
</style>
</head>

<body>
<p class="one">单色边框！</p>
<p class="two">双色边框！</p>
<p class="three">三色边框！</p>
<p class="four">四色边框！</p>
</body>
</html>

css怎么设置边框颜色

示例2：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<style>
p.four
{
	border-style:solid;
	border-top-color:#ff0000;
	border-bottom-color:#0000ff;
	border-left-color:rgb(250,0,255);
	border-right-color:#00ff00;
}
</style>
</head>

<body>

<p class="four">四色边框！</p>
</body>
</html>

css怎么设置边框颜色

CSS颜色

在css中，颜色值可以使用颜色名、百分比、数字和十六进制数值，共有四种写法。

1) 使用颜色名

虽然目前已经命名的颜色约有 184 种，但真正被各种浏览器支持，并且作为 CSS 规范推荐的颜色名称只有 16 种，如下表所示。

表1：CSS 规范推荐的颜色名称
名称	颜色	名称	颜色	名称	颜色
black	纯黑	silver	浅灰	navy	深蓝
blue	浅蓝	green	深绿	lime	浅绿
teal	靛青	aqua	天蓝	maroon	深红
red	大红	purple	深紫	fuchsia	品红
olive	褐黄	yellow	明黄	gray	深灰
white	壳白