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

<template>
  <div class="a">
    I have a border, an outline, AND a box shadow! Amazing, isn't it?
  </div>
  <div class="b">
    This box has a border on the bottom side.
  </div>
  <div class="c">
    <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 class="d">
    <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="e">
    <div>Element 1</div>
    <div>Element 2</div>
  </div>

</template>

<script setup>

</script>

<style scoped>
.a {
  border: 0.5rem outset pink;
  outline: 0.5rem solid khaki;
  box-shadow: 0 0 0 2rem skyblue;
  font: bold 1rem sans-serif;
  margin: 2rem;
  padding: 1rem;
  outline-offset: 0.5rem;
}

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

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

.c .redtext {
  color: red;
}

.d table {
  border-width: 3px;
  background-color: #52E385;
}

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

.d .b1 {
  border-bottom-style: none;
}

.d .b2 {
  border-bottom-style: hidden;
}

.d .b3 {
  border-bottom-style: dotted;
}

.d .b4 {
  border-bottom-style: dashed;
}

.d .b5 {
  border-bottom-style: solid;
}

.d .b6 {
  border-bottom-style: double;
}

.d .b7 {
  border-bottom-style: groove;
}

.d .b8 {
  border-bottom-style: ridge;
}

.d .b9 {
  border-bottom-style: inset;
}

.d .b10 {
  border-bottom-style: outset;
}

.e div {
  border: 1px solid red;
  margin: 1em 0;
}

div:nth-child(1) {
  border-bottom-width: thick;
}

div:nth-child(2) {
  border-bottom-width: 2em;
}
</style>