我有一个具有1px边框的div,我正在尝试为该div创建另一种颜色的3px边框。我使用这个代码:
Box { border: 1px solid #ddd; border-top: 3px solid #3F9BD0; }
解决方法
而不是边框顶端,尝试使用
:after
伪元素重新创建您想要的效果。
.Box { width: 200px; height: 100px; border: 1px solid #ddd; position: relative; } .Box:after { position: absolute; content: ""; width: 100%; height: 5px; top: -5px; background: dodgerblue; padding: 1px; left: -1px; }
<div class="Box"></div>
选择2:
.Box { width: 200px; height: 100px; border: 1px solid #ddd; background: -webkit-linear-gradient(top,dodgerblue 5%,#fff 5%); background: -moz-linear-gradient(top,#fff 5%); background: -o-linear-gradient(top,#fff 5%); background: -ms-linear-gradient(top,#fff 5%); background: linear-gradient(top,#fff 5%); }
<div class="Box"></div>