尝试边框颜色变化
在这一步中,你将探索使用不同的 CSS 颜色格式和技术来指定边框颜色的方法。在 WebIDE 中打开 index.html
文件,并使用以下代码更新它:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Border Color Variations</title>
<style>
.color-demo {
width: 200px;
height: 100px;
margin: 10px;
padding: 10px;
}
.named-color {
border: 5px solid tomato;
}
.hex-color {
border: 5px solid #4caf50;
}
.rgb-color {
border: 5px solid rgb(33, 150, 243);
}
.rgba-color {
border: 5px solid rgba(255, 152, 0, 0.7);
}
.hsl-color {
border: 5px solid hsl(120, 100%, 25%);
}
</style>
</head>
<body>
<div class="container">
<h1>Border Color Variations</h1>
<div class="color-demo named-color">Named Color (Tomato)</div>
<div class="color-demo hex-color">Hex Color (#4CAF50)</div>
<div class="color-demo rgb-color">RGB Color (Blue)</div>
<div class="color-demo rgba-color">RGBA Color (Transparent Orange)</div>
<div class="color-demo hsl-color">HSL Color (Dark Green)</div>
</div>
</body>
</html>
颜色指定方法:
- 命名颜色:使用预定义的颜色名称,例如
tomato
- 十六进制颜色:使用 6 位十六进制代码(例如
#4CAF50
)
- RGB 颜色:使用
rgb(red, green, blue)
格式
- RGBA 颜色:使用
rgba()
添加透明度
- HSL 颜色:使用
hsl(hue, saturation, lightness)
格式
查看文件内容时的示例输出:
$ cat ~/project/index.html
<!DOCTYPE html>
<html lang="en">
...
<div class="color-demo named-color">...
按下 Ctrl+S
或使用 WebIDE 中的保存图标保存文件。