<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>