开创者教程
首页
前端开发
后端开发
数据库
数据分析
开发工具
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-width: 4px; } </style> </head> <body> <h1>边框颜色 - 三颜色值</h1> <div class="container"> <div class="box" style="border-style: solid; border-color: red green blue;">上: 红色 | 右: 绿色 | 下: 蓝色 | 左: 绿色</div> <div class="box" style="border-style: dashed; border-color: #00a8ff #7bc043 #ff2501;">上: 天蓝色 | 右: 草绿色 | 下: 深红色 | 左: 草绿色</div> <div class="box" style="border-style: dotted; border-color: hsl(340, 100%, 60%) rgba(0, 255, 0, 0.5) yellow;">上: HSL亮粉色 | 右: 半透明绿色 | 下: 黄色 | 左: 半透明绿色</div> <div class="box" style="border-style: double; border-color: #9d29c0 rgb(0, 0, 255) hsla(180, 100%, 50%, 0.2);">上: 紫色 | 右: RGB蓝色 | 下: HSLA淡青色 | 左: RGB蓝色</div> <div class="box" style="border-style: solid; border-color: green #ff2501 blue;">上: 绿色 | 右: 深红色 | 下: 蓝色 | 左: 深红色</div> <div class="box" style="border-style: ridge; border-color: hsla(180, 100%, 50%, 0.2) yellow #7bc043;">上: HSLA淡青色 | 右: 黄色 | 下: 草绿色 | 左: 黄色</div> </div> </body> </html>
运行结果：
