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