CSS基础教程：颜色（二）

最新推荐文章于 2024-05-30 16:35:50 发布

m0_65012566

最新推荐文章于 2024-05-30 16:35:50 发布

阅读量337

点赞数

分类专栏： css 文章标签： css 前端

原文链接：https://www.tutorialspoint.com/css/css_colors.htm

版权

css 专栏收录该内容

29 篇文章 0 订阅

订阅专栏

CSS基础教程：颜色（二）

CSS颜色-RGB值

此颜色值使用rgb() 属性指定。
它需要三个值，红色、绿色和蓝色各一个。
值可以是0到255之间的整数或百分比。

注意：所有浏览器都不支持颜色的rgb()属性，因此建议不要使用它。

以下是使用RGB值显示几种颜色的示例。

在这里插入图片描述

如下示例：

<html>
<head>
<style>
   #rgbvalue {
      background-color: rgb(255,0,255);
      padding: 10px;
   }
</style>
</head>
<body>
   <h3>RGB - example</h3>
   <p>As the rgb(255,0,255) is set the background will appear accordingly.</p>
   <div id=“rgbvalue”>
      This div element has a colored background based on the rgb values.
   </div>
</body>
</html>

CSS颜色-RGBA值

此颜色值使用rgba()属性指定。
它需要四个值，红色、绿色和蓝色各一个，最后一个值作为alpha（透明度）值。
alpha值可以是0到1之间的任何值。

注意：所有浏览器都不支持颜色的rgba()属性，因此不建议使用。

以下是使用RGBA值显示几种颜色的示例。

在这里插入图片描述

如下示例：

<html>
<head>
<style>
   #rgbavalue {
      background-color: rgba(255,0,255,0.2);
      padding: 10px;
   }
</style>
</head>
<body>
   <h3>RGBA - example</h3>
   <p>As the rgba(255,0,255,0.2) is set the background will appear with transparency value of 0.2.</p>
   <div id=“rgbavalue”>
      This div element has a colored background based on the rgba values.
   </div>
</body>
</html>

CSS颜色-HSL值

此颜色值使用hsl()函数指定。
HSL代表色调、饱和度和亮度。
色相以度（0-360）表示，饱和度和亮度以百分比（0%-100%）表示。

以下是使用HSL属性显示几种颜色的示例。

在这里插入图片描述

如下示例：

<html>
<head>
<style>
   #hslvalue {
      background-color: hsl(355,70%,50%);
      padding: 10px;
}
</style>
</head>
<body>
   <h3>HSL - example</h3>
   <p>As the hsl(355,70%,50%) is set the background will appear based on the hsl values passed.</p>
   <div id=“hslvalue”>
      This div element has a colored background based on the hsl values hsl(355,70%,50%).
   </div>
</body>
</html>

CSS颜色-HSLA值

此颜色值使用hsl()函数指定。
HSLA代表色调、饱和度、亮度和α。
它需要四个值，第一个是色调，第二个是饱和度，第三个是亮度，第四个是alpha（透明度）值。
色相以度（0-360）表示，饱和度和亮度以百分比（0%-100%）表示，alpha值可以在0到1之间。

以下是使用HSLA属性显示几种颜色的示例。

在这里插入图片描述

如下示例：

<html>
<head>
<style>
   #hslavalue {
      background-color: hsla(355,70%,50%,0.4);
      padding: 10px;
   }
</style>
</head>
<body>
   <h3>HSLA - example</h3>
   <p>As the hsla(355,70%,50%,0.4) is set the background will appear based on the hsla values passed, with high transparency.</p>
   <div id=“hslavalue”>
      This div element has a colored background based on the hsl values hsla(355,70%,50%,0.4).
   </div>
</body>
</html>

CSS颜色-当前颜色关键字

currentcolor关键字表示元素颜色属性的值。它可以使用关键字currentcolor传递给任何其他样式属性。

如下示例：

<html>
<head>
<style>
   #currcolor {
      color: red;
      border: 5px solid currentcolor;
   }
</style>
</head>
<body>
   <h2>The currentcolor Keyword</h2>
   <p>As the currentcolor keyword is used for border after color property is set as red, the border will also appear red.</p>
   <div id=“currcolor”>
      This div element has a red text color and a red border.
   </div>
</body>
</html>

CSS颜色-浏览器安全颜色

下面是216种颜色的列表，这些颜色应该是最安全和计算机独立的颜色。这些颜色从十六进制的代码000000到FFFFFF不等。这些颜色可以安全使用，因为它们确保所有具有256调色板的计算机都能正确显示颜色：
! 在这里插入图片描述

CSS颜色 - 相关属性

以下是与颜色相关的所有属性列表：

属性	描述
opacity	设置元素的透明度级别。
hue	表示元素的色调角度。
color	设置元素文本和文本装饰的前景色。
background-color	设置背景的颜色。
border-color	设置元素边框的颜色。
box-shadow	在元素周围添加阴影效果。
outline-color	设置元素周围轮廓的颜色。
text-shadow	为元素的文本添加阴影。

m0_65012566

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS基础教程：颜色（二）

此颜色值使用rgb()属性指定。它需要三个值，红色、绿色和蓝色各一个。值可以是0到255之间的整数或百分比。注意：所有浏览器都不支持颜色的rgb()属性，因此建议不要使用它。以下是使用RGB值显示几种颜色的示例。如下示例：#rgbvaluergb;padding;
复制链接

扫一扫

专栏目录