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

元素的逻辑块端边框样式由 border-block-end-style CSS 属性定义。根据元素的书写模式、方向性和文本方向，此逻辑边框与物理边框样式相匹配。

为writing-mode direction和text-orientation 属性给出的值定义实际的border-top-style，border-right-style，左border-left-style.
元素的附加边框样式由相关属性border-block-start-style、border-inline-start-style 和border-inline-end-style 定义 .

语法

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

适用范围

所有 HTML 元素。

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

以下示例演示了无样式值的 border-block-end-style 属性的用法。

<html>
<head>
<style>
   .container {
      background-color: #d1e3ff;
      width: 350px;
      height: 350px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 10px;
   }
   .demo-border {
      border-block-end-style: none; 
      border-block-end-width: 8px;
      padding: 10px;
      margin: 10px;
      font-size: 20px;
      font-weight: bold;
      color: #333;
   }
</style>
</head>
<body>
<div class="container">
<p class="demo-border">这是一个无样式的 border-block-end-style 示例。</p>
</div>
</body>
</html>

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

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

<html>
<head>
<style>
   .container {
      background-color: #f3ffd1;
      width: 350px;
      height: 350px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 10px;
   }
   .demo-border {
      border-block-end-style: hidden; 
      border-block-end-width: 8px;
      padding: 10px;
      margin: 10px;
      font-size: 20px;
      font-weight: bold;
      color: #333;
   }
</style>
</head>
<body>
<div class="container">
   <p class="demo-border">这是一个具有隐藏样式的 border-block-end-style 示例。</p>
</div>
</body>
</html>

CSS border-block-end-style: 点线样式

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

<html>
<head>
<style>
   .container {
      background-color: #99e0f2;
      width: 350px;
      height: 350px;
      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: 3px solid grey;
      border-block-end-style: dotted;
      border-block-end-width: 6px;
      border-block-end-color: #0e58c7;
      margin: 10px;
      padding: 10px;
      font-size: 20px;
      font-weight: bold;
      color: #333;
   }
</style>
</head>
<body>
<div class="container">
<p class="demo-border">这是带有点样式的 border-block-end-style 属性示例</p>
</div>
</body>
</html>

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

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

<html>
<head>
<style>
   .container {
      background-color: #acf2bb;
      width: 350px;
      height: 350px;
      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: 3px solid grey;
      border-block-end-style: dashed;
      border-block-end-width: 6px;
      border-block-end-color: #069e27;
      margin: 10px;
      padding: 10px;
      font-size: 20px;
      font-weight: bold;
      color: #333;
   }
</style>
</head>
<body>
<div class="container">
<p class="demo-border">这是带有虚线样式的 border-block-end-style 属性示例</p>
</div>
</body>
</html>

CSS border-block-end-style: 实心样式

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

<html>
<head>
<style>
   .container {
      background-color: #e8f0c7;
      width: 350px;
      height: 350px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 10px;
      box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
   }
   .demo-border {
      border: 3px dashed grey;
      border-block-end-style: solid;
      border-block-end-width: 6px;
      border-block-end-color: #8ba808;
      margin: 10px;
      padding: 10px;
      font-size: 20px;
      font-weight: bold;
      color: #333;
   }
</style>
</head>
<body>
<div class="container">
<p class="demo-border">这是带有实体样式的 border-block-end-style 属性示例</p>
</div>
</body>
</html>

CSS border-block-end-style: Double

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

<html>
<head>
<style>
   .container {
      background-color: #f1f2eb;
      width: 350px;
      height: 350px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 10px;
      box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
   }
   .demo-border {
      border: 3px dashed #3b1a02;
      border-block-end-style: double;
      border-block-end-width: 10px;
      border-block-end-color: #ba5609;
      margin: 10px;
      padding: 10px;
      font-size: 20px;
      font-weight: bold;
      color: #333;
   }
</style>
</head>
<body>
<div class="container">
<p class="demo-border">This is border-block-end-style property example with double style</p>
</div>
</body>
</html>

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

以下示例演示了 border-block 的用法-end-style 属性，带有凹槽样式值。

<html>
<head>
<style>
   .container {
      background-color: #f2f2d3;
      width: 350px;
      height: 350px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 10px;
      box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
   }
   .demo-border {
      border: 3px solid #3b1a02;
      border-block-end-style: groove;
      border-block-end-width: 10px;
      border-block-end-color: #babd0b;
      margin: 10px;
      padding: 10px;
      font-size: 20px;
      font-weight: bold;
      color: #333;
   }
</style>
</head>
<body>
<div class="container">
<p class="demo-border">这是具有groove样式的border-block-end-style属性示例</p>
</div>
</body>
</html>

CSS border-block-end-style: Ridge Style

下面的示例演示了 border-block-end-style 的用法具有山脊样式值的属性。

<html>
<head>
<style>
   .container {
      background-color: #f0e0c7;
      width: 350px;
      height: 350px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 10px;
      box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
   }
   .demo-border {
      border: 3px dashed #3b1a02;
      border-block-end-style: ridge;
      border-block-end-width: 10px;
      border-block-end-color: #d6880b;
      margin: 10px;
      padding: 10px;
      font-size: 20px;
      font-weight: bold;
      color: #333;
   }
</style>
</head>
<body>
<div class="container">
<p class="demo-border">这是带有Ridge样式的 border-block-end-style 属性示例</p>
</div>
</body>
</html>

CSS border-block-end-style: 内嵌样式

以下示例演示了 border-block-end-style 属性与内嵌样式的用法

<html>
<head>
<style>
   .container {
      background-color: #eef5c6;
      width: 350px;
      height: 350px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 10px;
      box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
   }
   .demo-border {
      border: 3px dashed #3b1a02;
      border-block-end-style: inset;
      border-block-end-width: 8px;
      border-block-end-color: #a7c404;
      margin: 10px;
      padding: 10px;
      font-size: 20px;
      font-weight: bold;
      color: #333;
   }
</style>
</head>
<body>
<div class="container">
<p class="demo-border">这是具有内嵌样式的 border-block-end-style 属性示例</p>
</div>
</body>
</html>

CSS border-block-end-style: 起始样式

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

<html>
<head>
<style>
   .container {
      background-color: #a0e8a4;
      width: 350px;
      height: 350px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 10px;
      box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
   }
   .demo-border {
      border: 3px dashed #3b1a02;
      border-block-end-style: outset;
      border-block-end-width: 8px;
      border-block-end-color: #07e312;
      margin: 10px;
      padding: 10px;
      font-size: 20px;
      font-weight: bold;
      color: #333;
   }
</style>
</head>
<body>
<div class="container">
<p class="demo-border">这是具有起始样式的 border-block-end-style 属性示例</p>
</div>
</body>
</html>