css - 如何在css中编写不同类型的边框？

Question

如何在 css 中编写不同类型的边框？
我想在我的 html 模板中设计一组边框样式。有时我会感到困惑，是否应该在特殊的 css 选择器（例如 .hello ）下添加一些边框 css 代码，还是应该将边框样式分离到边框 css 组。我现在正在使用 sass+bootstrap。我希望 css export 给我一些原则来完成这项工作。

<div class="box bodered">has border around box</div>
<div class="box bodered dotted">border type is dotted</div>
<div class="box bodered type_1">border type with image shadow effort</div>

<div class="box bordered top">only has border at top</div>
<div class="box bordered left">only has border at left</div>
<div class="box bordered right">only has border at right</div>
<div class="box bordered bottom">only has border at bottom</div>

Answer 1

       .box{ border-color:#000000;}
       .bodered{ border:1px solid inherit;}
       .dotted{ border-style:dotted;}
       .top{border:none; border-top:1px solid #00000;}
       .left{border:none;border-left:1px solid #00000;}
       .right{border:none;border-right:1px solid #00000;}
       .bottom{border:none;border-bottom:1px solid #00000;}