开创者教程
首页
前端开发
后端开发
数据库
数据分析
开发工具
Git 教程
测验/考试
代码笔记
登录/注册
🎁 机器学习（ML）是AI的核心驱动力！全面、实用的 机器学习（ML）教程 现已正式上线
👉 点击学习
实例代码
下载
重置
运行代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>开创者教程(kaicz.com)</title><!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>垂直书写模式下的边框内联颜色</title> <style> body { font-family: system-ui, -apple-system, sans-serif; line-height: 1.5; max-width: 800px; margin: 0 auto; padding: 20px; color: #333; } h2 { color: #1a1a1a; margin: 1.5em 0 0.5em; } .vertical-box { background-color: lightgreen; inline-size: 300px; padding: 10px; border-inline-width: 5px; border-inline-style: solid; border-inline-color: blue; writing-mode: vertical-rl; margin: 20px 0; block-size: fit-content; } .vertical-box p { margin: 0; } </style> </head> <body> <header> <h1>垂直书写模式边框示例</h1> </header> <main> <article> <h2>border-inline-color: blue</h2> <div class="vertical-box"> <p>当 writing-mode 属性值设置为 'vertical-rl' 时，受 border-inline-color 属性影响的边框位于顶部和底部。</p> </div> </article> </main> </body> </html> </head> <body> <h1>我的第一个标题</h1> <p>我的第一个段落。</p> </body> </html>
运行结果：
