如何解决ASCII和CSS无JavaScript
我有一个问题。 是否可以在不使用JavaScript的情况下用ASCII符号(例如“-”和“ +”)替换标准CSS边框? 我想在框周围绘制边框,并使用ASCII符号来设置网站样式。 边框应如下所示:
+-----------+
| |
+-----------+
到目前为止,我发现的唯一解决方案是“硬编码” HTML中的边框,但我希望它更具动态性。
解决方法
您可以结合使用笔触-虚线数组矩形和位于拐角处的文本:
<svg xmlns="http://www.w3.org/2000/svg" width="421" height="220" viewBox="0 0 420 220">
<defs>
<style>
.edge {
fill: white;
stroke: green;
stroke-dasharray: 5;
stroke-width: 1.0px;
}
.corner_background {
fill: white;
}
.corner {
fill: green;
font-size: 16px;
font-weight: bold;
}
</style>
</defs>
<g>
<rect class="edge" x="10" y="10" width="400" height="200"/>
<rect class="corner_background" x="0" y="0" width="16" height="16"/>
<text class="corner" x="6" y="14">+</text>
<rect class="corner_background" x="400" y="0" width="16" height="16"/>
<text class="corner" x="406" y="14">+</text>
<rect class="corner_background" x="0" y="200" width="16" height="16"/>
<text class="corner" x="6" y="214">+</text>
<rect class="corner_background" x="400" y="200" width="16" height="16"/>
<text class="corner" x="406" y="214">+</text>
</g>
</svg>
,
使用after
和before
CSS
.box {
height: 150px;
width: 200px;
border: 2px dashed red;
margin: 0 auto;
position: relative;
}
.box::after {
content: "+";
position: absolute;
left: -6px;
top: -13px;
font-weight: bold;
font-size: 18px;
color: red;
}
.box::before {
content: "+";
position: absolute;
right: -6px;
top: -13px;
font-weight: bold;
font-size: 18px;
color: red;
}
.box .inner::after {
content: "+";
position: absolute;
left: -6px;
bottom: -11px;
font-weight: bold;
font-size: 18px;
color: red;
}
.box .inner::before {
content: "+";
position: absolute;
right: -6px;
bottom: -11px;
font-weight: bold;
font-size: 18px;
color: red;
}
<div class="box">
<div class="inner">
</div>
</div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。