控制垂直文本流（LTR）末端设置宽度、颜色和样式

实例代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>开创者教程(kaicz.com)</title>
    <style>
        body {
            font-family: 'Microsoft YaHei', sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            line-height: 1.6;
        }
        
        h2 {
            color: #333;
            text-align: center;
            margin-bottom: 30px;
        }
        
        .vertical-box {
            background-color: #90ee90; /* 浅绿色 */
            inline-size: 300px;
            padding: 20px;
            margin: 30px auto;
            border-block-width: 5px;
            writing-mode: vertical-rl; /* 垂直从右到左书写 */
            border-block-end: dotted #1e90ff; /* 蓝色虚线边框 */
            height: 200px;
            text-align: center;
        }
        
        .note {
            margin-top: 20px;
            padding: 15px;
            background-color: #f8f9fa;
            border-left: 4px solid #1e90ff;
            font-size: 0.9em;
        }
    </style>
</head>
<body>

<h2>border-block-end: dotted blue (垂直书写模式)</h2>
    
    <div class="vertical-box">
        <p>当writing-mode属性设置为'vertical-rl'时，受border-block-end属性影响的边框位于左侧。</p>
    </div>
    
    <div class="note">
        <p><strong>说明：</strong></p>
        <ul>
            <li><code>writing-mode: vertical-rl</code> 设置文本垂直排列(从右到左)</li>
            <li>在此模式下，<code>border-block-end</code> 对应的是<strong>左侧边框</strong></li>
            <li>边框样式为蓝色虚线(dotted blue)</li>
            <li>这是一个CSS逻辑属性，会根据书写模式自动调整位置</li>
        </ul>
    </div>

</body>
</html>