css颜色属性详细说明以及案例
参考资料
CSS 颜色属性
CSS 颜色属性用于设置元素的文本颜色、背景颜色、边框颜色等。常用的颜色属性包括 color、background-color、border-color 等。
1. color 属性
作用：设置文本的颜色。
语法：
color: <color>;取值：
颜色名称（如
red,blue,green）十六进制值（如
#ff0000,#00ff00）RGB 值（如
rgb(255, 0, 0),rgb(0, 255, 0)）RGBA 值（如
rgba(255, 0, 0, 0.5)）HSL 值（如
hsl(0, 100%, 50%)）HSLA 值（如
hsla(0, 100%, 50%, 0.5)）
案例：
p {
color: red;
}2. background-color 属性
作用：设置元素的背景颜色。
语法：
background-color: <color>;取值：同
color属性。
案例：
div {
background-color: #00ff00;
}3. border-color 属性
作用：设置元素的边框颜色。
语法：
border-color: <color>;取值：同
color属性。
案例：
div {
border-color: rgb(0, 0, 255);
border-width: 2px;
border-style: solid;
}4. opacity 属性
作用：设置元素的透明度。
语法：
opacity: <value>;取值：0 到 1 之间的值，0 表示完全透明，1 表示完全不透明。
案例：
img {
opacity: 0.5;
}5. currentColor 关键字
作用：使用当前元素的
color属性值作为颜色。语法：
<property>: currentColor;
案例：
div {
color: blue;
border: 2px solid currentColor;
}综合案例
body {
color: #333;
background-color: #f0f0f0;
}
h1 {
color: rgba(255, 0, 0, 0.8);
}
div {
background-color: hsl(120, 100%, 50%);
border: 2px solid currentColor;
opacity: 0.9;
}
声明：本站所有文章资源内容，如无特殊说明或标注，均为采集网络资源。如若本站内容侵犯了原著者的合法权益，可联系本站删除。
本文来自《西里网 . html 网页设计》 -- 发布时间：2025-03-29
本页链接：https://html.ciilii.com/show/news-209.html
原创声明：本篇文章均为西里网原创，由《DeepSeek-R1 模型》自动生成。内容真实性仅供参考学习。
本作品采用 知识共享署名—非商业性使用—相同方式共享 4.0 国际许可协议 (CC BY-NC-SA 4.0) 进行许可。