Home >Web Front-end >Front-end Q&A >How to set border color css

How to set border color css

青灯夜游
青灯夜游Original
2021-07-14 13:50:002545browse

In CSS, you can use the border-color, border-top-color, border-bottom-color, border-left-color, and border-right-color properties to set the border color of the element.

How to set border color css

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

css property for setting border color

Property Description
border-bottom-color Set the bottom border color of an element.
border-left-color Set the left border color of an element icon.
border-right-color Set the right border color of an element.
border-top-color Set the top border color of an element
border-color Set the four border colors of an element.

#The border-color property is a shorthand property that can set four border colors in one statement, and can set 1 to 4 colors.

This property can set the color of the visible parts of all borders of an element, or set different colors for the 4 sides.

Example:

border-color:red green blue pink;
  • The upper border is red

  • The right border is green

  • The lower border is blue

  • The left border is pink

border-color:red green blue;
  • The upper border is red

  • The right and left borders are green

  • The lower border is blue

border-color:dotted red green;
  • The upper and lower borders are red

  • The right and left borders are green

border-color:red;
  • all 4 The borders are all red

Example 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>

How to set border color css

Example 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>

How to set border color css

CSS Color

In css, the color value can use color name, percentage, number and hexadecimal value, there are four A way of writing.

1) Use color names

Although there are currently about 184 named colors, they are truly supported by various browsers and serve as CSS specifications There are only 16 recommended color names, as shown in the table below.

##blackPure blacksilverLight graynavyDark blue##blue##tealIndigoaqua天蓝maroonCrimson大红##oliveBrown Yellowyellow明黄grayDark GraywhiteShell 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视频教程

Table 1: Color names recommended by CSS specifications
Name Color Name Name Color Name Color
Light blue green Dark Green lime Light Green
##red
purple Deep Purple fuchsia Magenta

The above is the detailed content of How to set border color css. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn