css如何设置颜色值？rgb()设置颜色

在css中我们可以采用RGB标准来设置颜色值，这就需要用到cssrgb()函数，我们来了解一下rgb的相关知识吧。

语法：

rgb(r,g,b)；

r：设置红色值，可以使用正整数或百分数的方式设置值；

g：设置绿色值，可以使用正整数或百分数的方式设置值；

b：设置蓝色值，可以使用正整数或百分数的方式设置值。

说明：rgb()中的每个参数(r、g以及b)定义不同颜色的强度，可以是介于0与255之间的正整数，或者是百分比值（从0%到100%）。

我们通过一个简单的代码示例来了解rgb()设置颜色的方法。

<!DOCTYPEhtml>

<html>

<head>

<metacharset="UTF-8">

<style>

div{

width:350px;

height:200px;

background-color:rgb(0,0,0);

color:rgb(255,255,255);

border:1pxsolidrgb(255,0,0);

padding:10px;

}

</style>

</head>

<body>

<div>这是一段测试代码<br><br>

设置盒子的背景色为黑色【rgb(0,0,0)】<br><br>

设置字体文字的颜色为白色【rgb(255,255,255】<br><br>

边框颜色为红色【rgb(255,0,0)】<br>

</div>

</body>

</html>

效果图：

2.jpg

上例中，我们通过分别给background-color，color，border设置不同的rgb()颜色值来设置了盒子的背景色、字体文字颜色、边框颜色。

我们要注意一下rgb()颜色值的写法，下面的代码示例中rgb()函数的取值，有一些是对的，也有一些是错误的，注意区分：

/*使用正整数的取值方法*/

rgb(255,0,51)

rgb(255,0,51.2)/*错误的写法，不能是浮点数，必须为正整数*/

/*使用%的取值方法*/

rgb(100%,0%,20%)

rgb(100%,0,20%)/*错误的写法，不能混合使用整数和百分比值*/

本文转载自中文网

如需转载，请注明文章出处和来源网址：http://www.divcss5.com/css3-style/c57325.shtml