开创者教程
首页
前端开发
后端开发
数据库
数据分析
开发工具
Git 教程
测验/考试
代码笔记
登录/注册
🎁 机器学习（ML）是AI的核心驱动力！全面、实用的 机器学习（ML）教程 现已正式上线
👉 点击学习
实例代码
下载
重置
运行代码
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>边框颜色值示例 - 单颜色值</title> <style> h1{ text-align: center; } .container { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1rem; padding: 1rem; } .box { padding: 1rem; text-align: center; border-style: solid; border-width: 2px; } </style> </head> <body> <h1>边框颜色 - 单颜色值</h1> <div class="container"> <div class="box" style="border-color: red;">红色边框</div> <div class="box" style="border-color: blue;">蓝色边框</div> <div class="box" style="border-color: green;">绿色边框</div> <div class="box" style="border-color: yellow;">黄色边框</div> <div class="box" style="border-color: #ff2501;">深红色 #ff2501</div> <div class="box" style="border-color: #00a8ff;">天蓝色 #00a8ff</div> <div class="box" style="border-color: #7bc043;">草绿色 #7bc043</div> <div class="box" style="border-color: #9d29c0;">紫色 #9d29c0</div> <div class="box" style="border-color: rgb(0, 0, 255);">RGB蓝色</div> <div class="box" style="border-color: rgba(0, 255, 0, 0.5);">半透明绿色</div> <div class="box" style="border-color: hsl(340, 100%, 60%);">HSL亮粉色</div> <div class="box" style="border-color: hsla(180, 100%, 50%, 0.2);">HSLA淡青色</div> </div> </body> </html>
运行结果：
