我的问题没有找到任何答案,即使它很简单。
我正在使用CSS proprety box-sizing为div做一个“内部边框”(实际上是<a>...</a>
)
.myDiv{
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
border: 2px solid #3498db;
}
但它接缝表明它根本不起作用,因为没有边框属性,边框是相同的。有人有答案吗?
只是为了确定我在做什么。我想要的是获得<a>
“内部边界”。我显然知道border: ...;
属性,但它使元素更大,我不希望这样。我希望有类似border: -2px solid #3498db
的内容。
[编辑]我找到了解决方案。评论说明。
答案 0 :(得分:1)
简单的方法是将<span>
放在<a>
内,然后在<span>
上添加边框。然后在<a>
或<span>
上打开nessesary padding / margin。
答案 1 :(得分:1)
在没有宽度的内联元素上使用box-sizing: border-box
不会使边框成为元素大小的内部。
相反,您可以使用:after
伪元素使边框位于元素的顶部。
<强> HTML 强>
This is some <span class="textBorder">text</span> and then some more.
<强> CSS 强>
.textBorder {
background: #ffff99;
position: relative;
}
.textBorder:after {
content: " ";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border: 1px solid rgba(0,0,0,0.5);
}
<强> Demo 强>