CSS 属性

元素的逻辑块起始边框宽度由 CSS 属性 border-block-start-width 指定，该属性根据元素的书写模式、方向性和文本方向转换为物理边框宽度。

基于writing-mode，direction 和输入的 text-orientation 值，它可以与 border-top-width，border-right-width，border-bottom-width，或border-left-width 一起使用。

属性值

语法

border-block-start-width = <line-width>
<line-width> = <length [0,∞]> | thin | medium | thick

适用范围

所有 HTML

CSS border-block-start-width: length 

下面的示例演示了 border-block-start-width 属性的用法。

<html>
<head>
<style>
   body {
      font-family: 'Arial', sans-serif;
      margin: 50px;
      padding: 50px;
      background-color: #f0f0f0;
   }
   .new-container {
      background-color: #ffd700;
      width: 400px;
      height: 400px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 15px;
      box-shadow: 4px 4px 12px rgba(0, 0, 0, 0.8);
   }
   .custom-border {
      border: 4px dashed #e74c3c;
      border-block-start-style: ridge;
      border-block-start-width: 10px;
      padding: 15px;
      margin: 10px;
      font-size: 22px;
      font-weight: bold;
      color: #333;
   }
</style>
</head>
<body>
<div class="new-container">
<p class="custom-border">border-block-start-width 属性的用法。</p>
</div>
</body>
</html>

CSS border-block-start-width: thin值

以下示例演示了 border-block-start-width 属性与thin值的用法。

<html>
<head>
<style>
   body {
      font-family: 'Arial', sans-serif;
      margin: 50px;
      padding: 50px;
      background-color: #f0f0f0;
   }
   .new-container {
      background-color: #a6d1ed;
      width: 400px;
      height: 400px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 15px;
      box-shadow: 4px 4px 12px rgba(0, 0, 0, 0.8);
   }
   .custom-border {
      border: 4px dashed #e74c3c;
      border-block-start-style: solid;
      border-block-start-width: thin;
      padding: 15px;
      margin: 10px;
      font-size: 22px;
      font-weight: bold;
      color: #333;
   }
</style>
</head>
<body>
<div class="new-container">
<p class="custom-border">border-block-start-width 属性与thin值的用法。</p>
</div>
</body>
</html>

CSS border-block-start-width: medium

以下示例演示了使用medium值的 border-block-start-width 属性。

<html>
<head>
<style>
   body {
      font-family: 'Arial', sans-serif;
      margin: 50px;
      padding: 50px;
      background-color: #f0f0f0;
   }
   .new-container {
      background-color: #a6d1ed;
      width: 400px;
      height: 400px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 15px;
      box-shadow: 4px 4px 12px rgba(0, 0, 0, 0.8);
   }
   .custom-border {
      border: 4px dashed #034673;
      border-block-start-style: solid;
      border-block-start-width: medium;
      padding: 15px;
      margin: 10px;
      font-size: 22px;
      font-weight: bold;
      color: #333;
   }
</style>
</head>
<body>
<div class="new-container">
<p class="custom-border">使用medium值的 border-block-start-width 属性用法。</p>
</div>
</body>
</html>

CSS border-block-start-width: thick值

以下示例演示了 border-block-start-width 属性与thick值的用法。

<html>
<head>
<style>
   body {
      font-family: 'Arial', sans-serif;
      margin: 50px;
      padding: 50px;
      background-color: #f0f0f0;
   }
   .new-container {
      background-color: #d8f0d3;
      width: 400px;
      height: 400px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 15px;
      box-shadow: 4px 4px 12px rgba(0, 0, 0, 0.8);
   }
   .custom-border {
      border: 4px dashed #1d8a07;
      border-block-start-style: solid;
      border-block-start-width: thick;
      padding: 15px;
      margin: 10px;
      font-size: 22px;
      font-weight: bold;
      color: #333;
   }
</style>
</head>
<body>
<div class="new-container">
<p class="custom-border">border-block-start-width 属性与thick值的用法。</p>
</div>
</body>
</html>

CSS border-block-start-width: 书写模式

以下示例演示了在垂直书写模式下使用 border-block-start-width 属性。

<html>
<head>
<style>
   body {
      font-family: 'Arial', sans-serif;
      margin: 50px;
      padding: 50px;
      background-color: #f0f0f0;
   }
   .vertical-container {
      background-color: #87cefa;
      width: 400px;
      height: 400px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 15px;
      box-shadow: 4px 4px 12px rgba(0, 0, 0, 0.8);
   }
   .vertical-border {
      writing-mode: vertical-rl;
      border: 3px solid #475861;
      border-block-start-style: dotted;
      border-block-start-width: 6px;
      padding: 12px;
      margin: 10px;
      font-size: 20px;
      font-weight: bold;
      color: #333;
   }
</style>
</head>
<body>
<div class="vertical-container">
<p class="vertical-border">垂直书写模式下使用 border-block-start-width 属性。</p>
</div>
</body>
</html>