63 lines
2.2 KiB
HTML
63 lines
2.2 KiB
HTML
<!DOCTYPE HTML>
|
|
<head>
|
|
<style>
|
|
.box {
|
|
height: 100px;
|
|
width: 100px;
|
|
display: inline-block;
|
|
background-color: red;
|
|
}
|
|
.border-20 {
|
|
border: 20px solid;
|
|
}
|
|
.no-border {
|
|
border: 0px none;
|
|
}
|
|
.border-image-100-intrinsic {
|
|
border-image: url('resources/svg-border-100x100-intrinsic.svg') 0 fill;
|
|
}
|
|
.border-image-100-intrinsic-slice {
|
|
border-image: url('resources/svg-border-100x100-intrinsic.svg') 20 fill;
|
|
}
|
|
.border-image-100-viewbox {
|
|
border-image: url('resources/svg-border-100x100-viewbox.svg') 0 fill;
|
|
}
|
|
.border-image-100-viewbox-slice {
|
|
border-image: url('resources/svg-border-100x100-viewbox.svg') 20 fill;
|
|
}
|
|
.border-image-100-relative {
|
|
border-image: url('resources/svg-border-100x100-relative.svg') 0 fill;
|
|
}
|
|
.border-image-100-relative-slice {
|
|
border-image: url('resources/svg-border-100x100-relative.svg') 20 fill;
|
|
}
|
|
.border-image-no-intrinsic {
|
|
border-image: url('resources/svg-border-no-intrinsic.svg') 0 fill;
|
|
}
|
|
.border-image-no-intrinsic-slice {
|
|
border-image: url('resources/svg-border-no-intrinsic.svg') 20 fill;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="box no-border border-image-100-intrinsic"></div>
|
|
<div class="box border-20 border-image-100-intrinsic"></div>
|
|
<div class="box no-border border-image-100-intrinsic-slice"></div>
|
|
<div class="box border-20 border-image-100-intrinsic-slice"></div>
|
|
<br>
|
|
<div class="box no-border border-image-100-viewbox"></div>
|
|
<div class="box border-20 border-image-100-viewbox"></div>
|
|
<div class="box no-border border-image-100-viewbox-slice"></div>
|
|
<div class="box border-20 border-image-100-viewbox-slice"></div>
|
|
<br>
|
|
<div class="box no-border border-image-100-relative"></div>
|
|
<div class="box border-20 border-image-100-relative"></div>
|
|
<div class="box no-border border-image-100-relative-slice"></div>
|
|
<div class="box border-20 border-image-100-relative-slice"></div>
|
|
<br>
|
|
<div class="box no-border border-image-no-intrinsic"></div>
|
|
<div class="box border-20"></div>
|
|
<div class="box no-border border-image-no-intrinsic-slice"></div>
|
|
<div class="box border-20 border-image-no-intrinsic-slice"></div>
|
|
</body>
|