CSS 教程

<div class="color-example">
    <h2>颜色示例</h2>
    <p class="text-red">红色文本</p>
    <p class="text-blue">蓝色文本</p>
    <p class="text-green">绿色文本</p>
</div>

<style>
.color-example {
    background-color: #f0f0f0; /* 设置背景颜色为浅灰色 */
    padding: 20px; /* 设置内边距为20像素 */
    border-radius: 4px; /* 设置边框圆角为4像素 */
}

.text-red {
    color: #FF0000; /* 设置文本颜色为红色 */
}

.text-blue {
    color: #0000FF; /* 设置文本颜色为蓝色 */
}

.text-green {
    color: #00FF00; /* 设置文本颜色为绿色 */
}
</style>

<div class="opacity-example">
    <div class="box box1">不透明红色</div>
    <div class="box box2">半透明红色</div>
    <div class="box box3">透明红色</div>
</div>

<style>
.opacity-example {
    display: flex; /* 使用flex布局 */
    gap: 20px; /* 设置元素间距为20像素 */
    padding: 20px; /* 设置内边距为20像素 */
}

.box {
    width: 100px; /* 设置盒子宽度为100像素 */
    height: 100px; /* 设置盒子高度为100像素 */
    display: flex; /* 使用flex布局 */
    align-items: center; /* 垂直居中对齐 */
    justify-content: center; /* 水平居中对齐 */
    border-radius: 4px; /* 设置边框圆角为4像素 */
    color: white; /* 设置文字颜色为白色 */
}

.box1 {
    background-color: rgba(255, 0, 0, 1); /* 设置背景颜色为完全不透明的红色，alpha值为1 */
}

.box2 {
    background-color: rgba(255, 0, 0, 0.5); /* 设置背景颜色为半透明的红色，alpha值为0.5 */
}

.box3 {
    background-color: rgba(255, 0, 0, 0.1); /* 设置背景颜色为几乎透明的红色，alpha值为0.1 */
    color: black; /* 设置文字颜色为黑色，以便于阅读 */
}
</style>

<div class="hsl-example">
    <div class="hsl-box hsl1">红色</div>
    <div class="hsl-box hsl2">橙色</div>
    <div class="hsl-box hsl3">黄色</div>
    <div class="hsl-box hsl4">绿色</div>
    <div class="hsl-box hsl5">蓝色</div>
    <div class="hsl-box hsl6">紫色</div>
</div>

<style>
.hsl-example {
    display: flex; /* 使用flex布局 */
    flex-wrap: wrap; /* 允许元素换行 */
    gap: 10px; /* 设置元素间距为10像素 */
    padding: 20px; /* 设置内边距为20像素 */
}

.hsl-box {
    width: 80px; /* 设置盒子宽度为80像素 */
    height: 80px; /* 设置盒子高度为80像素 */
    display: flex; /* 使用flex布局 */
    align-items: center; /* 垂直居中对齐 */
    justify-content: center; /* 水平居中对齐 */
    border-radius: 4px; /* 设置边框圆角为4像素 */
    color: white; /* 设置文字颜色为白色 */
    font-weight: bold; /* 设置文字为粗体 */
}

.hsl1 {
    background-color: hsl(0, 100%, 50%); /* 使用HSL设置背景颜色为红色，色相0，饱和度100%，亮度50% */
}

.hsl2 {
    background-color: hsl(30, 100%, 50%); /* 使用HSL设置背景颜色为橙色，色相30，饱和度100%，亮度50% */
}

.hsl3 {
    background-color: hsl(60, 100%, 50%); /* 使用HSL设置背景颜色为黄色，色相60，饱和度100%，亮度50% */
}

.hsl4 {
    background-color: hsl(120, 100%, 50%); /* 使用HSL设置背景颜色为绿色，色相120，饱和度100%，亮度50% */
}

.hsl5 {
    background-color: hsl(240, 100%, 50%); /* 使用HSL设置背景颜色为蓝色，色相240，饱和度100%，亮度50% */
}

.hsl6 {
    background-color: hsl(280, 100%, 50%); /* 使用HSL设置背景颜色为紫色，色相280，饱和度100%，亮度50% */
}
</style>

<div class="gradient-example">
    <div class="gradient-box gradient1">线性渐变</div>
    <div class="gradient-box gradient2">径向渐变</div>
    <div class="gradient-box gradient3">角度渐变</div>
</div>

<style>
.gradient-example {
    display: flex; /* 使用flex布局 */
    gap: 20px; /* 设置元素间距为20像素 */
    padding: 20px; /* 设置内边距为20像素 */
}

.gradient-box {
    width: 150px; /* 设置盒子宽度为150像素 */
    height: 150px; /* 设置盒子高度为150像素 */
    display: flex; /* 使用flex布局 */
    align-items: center; /* 垂直居中对齐 */
    justify-content: center; /* 水平居中对齐 */
    border-radius: 4px; /* 设置边框圆角为4像素 */
    color: white; /* 设置文字颜色为白色 */
    font-weight: bold; /* 设置文字为粗体 */
}

.gradient1 {
    background: linear-gradient(red, blue); /* 使用线性渐变，从红色过渡到蓝色 */
}

.gradient2 {
    background: radial-gradient(circle, red, blue); /* 使用径向渐变，从中心红色过渡到蓝色 */
}

.gradient3 {
    background: linear-gradient(45deg, red, blue); /* 使用45度角线性渐变，从红色过渡到蓝色 */
}
</style>