Java 后端学习笔记

提示

本文主要讲解 CSS 颜色的使用。@ermo

# CSS3 颜色

# 颜色增强语法

RGBA（Red Green Blue Alpha） 是 RGB 的一个增强方法，用于设置 CSS 颜色。A 表示 Alpha，用于设置颜色的透明的，范围在 0.0~1.0 之间，值越大越不透明。

<div class="p1">p1</div>
<div class="p2">p2</div>
<div class="p3">p3</div>
<div class="p4">p4</div>

.p1 {
    background-color: rgba(255, 0, 0, 0.2);
}
.p2 {
    background-color: rgba(255, 0, 0, 0.4);
}
.p3 {
    background-color: rgba(255, 0, 0, 0.6);
}
.p4 {
    background-color: rgba(255, 0, 0, 0.8);
}

HSL（Hue Saturation Lightness）是颜色的另一种表达方式，HSL 是色调、饱和度、亮度的组合。

语法为：

hsl(色调, 饱和度, 亮度)

每一个参数的取值规则：

  • 色调：取值为0~360数值，0和360都是红色，120是绿色，240为蓝色
  • 饱和度：取值为0~100百分比，数值越大，饱和度越高
  • 亮度：取值为0~100百分比，0%为暗黑色，100%为亮白色

示例：

<div class="h1">h1</div>
<div class="h2">h2</div>
<div class="h3">h3</div>
<div class="h4">h4</div>

.h1 {
    /* 绿色 */
    background-color: hsl(120, 100%, 50%);
}

.h2 {
    /* 浅绿色 */
    background-color: hsl(120, 100%, 75%);
}
.h3 {
    /* 深绿色 */
    background-color: hsl(120, 100%, 25%);
}
.h4 {
    /* 淡绿色 */
    background-color: hsl(120, 60%, 70%);
}

HSLA（Hue Saturation Lightness）是 HSL 的增强语法，A 表示透明的，透明度的取值范围在 0.0~1.0，数值越大透明的越低。

示例：

<div class="hsla1">hsla1</div>
<div class="hsla2">hsla2</div>
<div class="hsla3">hsla3</div>
<div class="hsla4">hsla4</div>

.hsla1 {
    background-color: hsla(120, 100%, 50%, 0.3);
}
.hsla2 {
    background-color: hsla(120, 100%, 75%, 0.3);
}
.hsla3 {
    background-color: hsla(120, 100%, 25%, 0.3);
}
.hsla4 {
    background-color: hsla(120, 100%, 70%, 0.3);
}

透明度有一个单独的属性 opacity，上文中可以通过 HSLA 和 RGBA 作为一个参数设置透明度，也可以使用单独属性 opacity 设置透明度。数值在 0.0~1.0 之间，数值越大，越不透明。

示例：

<div class="op1">op1</div>
<div class="op2">op2</div>
<div class="op3">op3</div>

.op1 {
    background-color: rgb(255, 0, 0);
    opacity: 0.6;
}

.op2 {
    background-color: rgb(0, 255, 0);
    opacity: 0.6;
}

.op3 {
    background-color: rgb(0, 0, 255);
    opacity: 0.6;
}

# 颜色关键字

transparent 关键字的作用是将一个元素的背景色设置为透明。

        <div class="parent">
            <div class="box1">box1 不透明</div>
            <div class="box2">box2 透明</div>
        </div>

.parent {
    width: 400px;
    height: 400px;
    background-color: burlywood;
}
.box1 {
    width: 200px;
    height: 50px;
    border: 2px solid black;
    background-color: green;
    padding: 10px
}

.box2 {
    width: 200px;
    height: 50px;
    border: 2px solid black;
    background-color: transparent;
    padding: 10px
}

currentColor 是 css 的一个关键字，使用起来更像是一个变量，存储的是当前元素上的颜色。

这个当前颜色指的是变量 currentColor 所在的元素上的 color 值，如果当前元素没有设置颜色，系统会自动向父元素寻找，一直向上找，直到找到 body 为止。全部没有设置颜色就使用默认颜色。

看一个简单例子。

<div class="current">a simple text.</div>

.current {
    color: pink;
    border: 10px solid currentColor;
    padding: 2px;
}

上例中的 div 文字颜色是粉色，边框使用当前元素的颜色，所以边框也是粉色。

除了可以应用到 border 上，还可以应用到 background-color 和 box-shadow 属性。

div {
    background-clolor: currentColor;
    padding: 10px;
}

div {
    box-shadow: 0px 0px 10px currentColor;
    border: 1px solid currentColor;
    padding: 1px;
}

inherit 关键字可以继承父元素相同属性对应的值。

<div>这是一个 <span>span</span>，外面是 div</div>

div {
    border: 2px solid pink;
}
span {
    border: inherit;
}

上例中 span 元素的边框样式继承了父元素 div 边框的样式。

← CSS3 弹性盒子（Flexbox） →