00041.【CSS】边关相关的简单案例2

<template>
  <div class="a">
    <div>Element 1</div>
    <div>Element 2</div>
  </div>

  <div class="b">
    <table>
      <tr>
        <td class="b1">none</td>
        <td class="b2">hidden</td>
        <td class="b3">dotted</td>
        <td class="b4">dashed</td>
      </tr>
      <tr>
        <td class="b5">solid</td>
        <td class="b6">double</td>
        <td class="b7">groove</td>
        <td class="b8">ridge</td>
      </tr>
      <tr>
        <td class="b9">inset</td>
        <td class="b10">outset</td>
      </tr>
    </table>
  </div>

  <div class="c">
    <div class="mybox">
      <p>This is a box with a border around it.
        Note which side of the box is
        <span class="redtext">red</span>.</p>
    </div>
  </div>

  <div class="d">
    This box has a border on the top side.
  </div>

  <div class="e">
    <table>
      <tr>
        <td class="b1">none</td>
        <td class="b2">hidden</td>
        <td class="b3">dotted</td>
        <td class="b4">dashed</td>
      </tr>
      <tr>
        <td class="b5">solid</td>
        <td class="b6">double</td>
        <td class="b7">groove</td>
        <td class="b8">ridge</td>
      </tr>
      <tr>
        <td class="b9">inset</td>
        <td class="b10">outset</td>
      </tr>
    </table>
  </div>
</template>

<script setup>

</script>

<style scoped>
.a div {
  border: 1px solid red;
  margin: 1em 0;
}

.a div:nth-child(1) {
  border-top-width: thick;
}

.a div:nth-child(2) {
  border-top-width: 2em;
}

.b table {
  border-width: 2px;
  background-color: #52E385;
}

.b tr, td {
  padding: 3px;
}

/* border-top-style example classes */
.b .b1 {
  border-top-style: none;
}

.b .b2 {
  border-top-style: hidden;
}

.b .b3 {
  border-top-style: dotted;
}

.b .b4 {
  border-top-style: dashed;
}

.b .b5 {
  border-top-style: solid;
}

.b .b6 {
  border-top-style: double;
}

.b .b7 {
  border-top-style: groove;
}

.b .b8 {
  border-top-style: ridge;
}

.b .b9 {
  border-top-style: inset;
}

.b .b10 {
  border-top-style: outset;
}

.c .mybox {
  border: solid 0.3em gold;
  border-top-color: red;
  width: auto;
}

.c .redtext {
  color: red;
}

.d {
  border-top: 4px dashed blue;
  background-color: gold;
  height: 100px;
  width: 100px;
  font-weight: bold;
  text-align: center;
}

.e table {
  border-width: 3px;
  background-color: #52E396;
}

.e tr, .e td {
  padding: 2px;
}

/* border-style 示例 */
.e .b1 {
  border-style: none;
}

.e .b2 {
  border-style: hidden;
}

.e .b3 {
  border-style: dotted;
}

.e .b4 {
  border-style: dashed;
}

.e .b5 {
  border-style: solid;
}

.e .b6 {
  border-style: double;
}

.e .b7 {
  border-style: groove;
}

.e .b8 {
  border-style: ridge;
}

.e .b9 {
  border-style: inset;
}

.e .b10 {
  border-style: outset;
}
</style>