CSS border-block-start-style - 易学教程，面试笔记经验！

元素的逻辑块开始边框样式由 border-block-start-style CSS 属性确定，该属性会根据元素的书写模式、方向性和文本方向转换为物理边框样式。

根据为 writing-mode 、direction和text-orientation 提供的值，其功能对应于border-top-style，border-right-style 、border-right-style 或 border-left-style.
元素的其他边框样式由相关属性border-block-end-style，border-inline-start-style 和 border-inline-end-style 定义。

属性值

<'border-style'>: 边框的线条样式。

语法

border-block-start-style = <line-style>

适用范围

所有 HTML 元素。

CSS border-block-start-style: 无样式

以下示例演示如何使用无样式值的 border-block-start-style 属性。

<html>
<head>
<style>
   .container {
      background-color: #c9abaf;
      width: 350px;
      height: 350px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 10px;
   }
   .demo-border {
      border-block-start-style: none; 
      border-block-start-width: 8px;
      padding: 10px;
      font-size: 20px;
      font-weight: bold;
      color: #333;
   }
</style>
</head>
<body>
<div class="container">
   <p class="demo-border">使用无样式值的 border-block-start-style 属性。</p>
</div>
</body>
</html>

CSS border-block-start-style: 隐藏样式

以下示例演示了 border-block-start-style 属性与隐藏样式值的用法。

<html>
<head>
<style>
   .container {
      background-color: #b6d9f0;
      width: 350px;
      height: 350px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 10px;
   }
   .demo-border {
      border-block-start-style: hidden; 
      border-block-start-width: 8px;
      padding: 10px;
      font-size: 20px;
      font-weight: bold;
      color: #333;
   }
</style>
</head>
<body>
<div class="container">
   <p class="demo-border">border-block-start-style 属性与隐藏样式值的用法。</p>
</div>
</body>
</html>

CSS border-block- start-style: 点式样式

以下示例演示了 border-block-start-style 属性与点式样式值的用法。

<html>
<head>
<style>
   .container {
      background-color: #ffe4b5;
      width: 250px;
      height: 250px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 10px;
      box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.2);
   }
   .demo-border {
      border: 5px green;
      border-block-start-style: dotted;
      padding: 10px;
      font-size: 20px;
      font-weight: bold;
      color: #333;
   }
</style>
</head>
<body>
<div class="container">
<p class="demo-border">border-block-start-style 属性与点式样式值的用法。</p>
</div>
</body>
</html>

CSS border-block-start-style: 虚线样式

以下示例演示了 border-block-start-style 属性与虚线样式值的用法。

<html>
<head>
<style>
   .container {
      background-color: #f0e5c9;
      width: 350px;
      height: 350px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 10px;
   }
   .demo-border {
      border-block-start-style: dashed; 
      border-block-start-width: 5px;
      padding: 10px;
      font-size: 20px;
      font-weight: bold;
      color: #333;
   }
</style>
</head>
<body>
<div class="container">
   <p class="demo-border">border-block-start-style 属性与虚线样式值的用法。</p>
</div>
</body>
</html>

CSS border-block-start-style: 实线样式

以下示例演示了使用实线样式值的 border-block-start-style 属性的用法。

<html>
<head>
<style>
   .container {
      background-color: #f0c7b1;
      width: 350px;
      height: 350px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 10px;
   }
   .demo-border {
      border-block-start-style: solid; 
      border-block-start-width: 6px;
      padding: 10px;
      font-size: 20px;
      font-weight: bold;
      color: #333;
   }
</style>
</head>
<body>
<div class="container">
   <p class="demo-border">实线样式值的 border-block-start-style 属性的用法。</p>
</div>
</body>
</html>

CSS border-block-start-style: double 样式

以下示例演示了具有double样式值的 border-block-start-style 属性的用法。

<html>
<head>
<style>
   .container {
      background-color: #edd97e;
      width: 350px;
      height: 350px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 10px;
   }
   .demo-border {
      border-block-start-style: double; 
      border-block-start-width: 9px;
      padding: 10px;
      font-size: 20px;
      font-weight: bold;
      color: #333;
   }
</style>
</head>
<body>
<div class="container">
   <p class="demo-border">double样式值的 border-block-start-style 属性的用法。</p>
</div>
</body>
</html>

CSS border-block-start-style: Groove 样式

以下示例演示了 border-block-start-style 属性与groove样式值的用法。

<html>
<head>
<style>
   .container {
      background-color: #64e3ae;
      width: 350px;
      height: 350px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 10px;
   }
   .demo-border {
      border-block-start-style: groove; 
      border-block-start-width: 10px;
      padding: 10px;
      font-size: 20px;
      font-weight: bold;
      color: #333;
   }
</style>
</head>
<body>
<div class="container">
   <p class="demo-border">border-block-start-style 属性与groove样式值的用法。</p>
</div>
</body>
</html>

CSS border-block-start-style: Ridge 样式

以下示例演示了border-block-start-style 属性Ridge 样式。

<html>
<head>
<style>
   .container {
      background-color: #64bfe3;
      width: 350px;
      height: 350px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 10px;
   }
   .demo-border {
      border-block-start-style: ridge; 
      border-block-start-width: 10px;
      padding: 10px;
      font-size: 20px;
      font-weight: bold;
      color: #333;
   }
</style>
</head>
<body>
<div class="container">
   <p class="demo-border">border-block-start-style 属性Ridge 样式。</p>
</div>
</body>
</html>

CSS border-block-start-style: inset样式

以下示例演示了 border-block- start-style 属性带有inset样式值的的用法。

<html>
<head>
<style>
   .container {
      background-color: #ebcdf7;
      width: 350px;
      height: 350px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 10px;
   }
   .demo-border {
      border-block-start-style: inset; 
      border-block-start-width: 10px;
      padding: 10px;
      font-size: 20px;
      font-weight: bold;
      color: #333;
   }
</style>
</head>
<body>
<div class="container">
   <p class="demo-border">border-block- start-style 属性带有inset样式值的的用法 。</p>
</div>
</body>
</html>

CSS border-block-start-style: Outset 样式

下面的示例演示了 border-block-start-style 属性带有outset样式值的用法。

<html>
<head>
<style>
   .container {
      background-color: #e8879c;
      width: 350px;
      height: 350px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 10px;
   }
   .demo-border {
      border-block-start-style: outset; 
      border-block-start-width: 8px;
      padding: 10px;
      font-size: 20px;
      font-weight: bold;
      color: #333;
   }
</style>
</head>
<body>
<div class="container">
   <p class="demo-border">border-block-start-style 属性带有outset样式值的用法。</p>
</div>
</body>
</html>

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

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

<html>
<head>
<style>
   body {
      font-family: 'Arial', sans-serif;
      margin: 50px;
      padding: 50px;
      background-color: #f0f0f0;
   }
   .container {
      background-color: #77c6ed;
      width: 450px;
      height: 450px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 10px;
      box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.8);
   }
   .demo-border {
      writing-mode: vertical-rl;
      border: 6px dashed blue;
      border-block-start-style: groove;
      padding: 10px;
      font-size: 20px;
      font-weight: bold;
      color: #333;
   }
</style>
</head>
<body>
<div class="container">
<p class="demo-border">垂直书写模式下使用 border-block-start-style 属性的用法。</p>
</div>
</body>
</html>