Question

我的问题没有找到任何答案，即使它很简单。我正在使用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的内容。

[编辑]我找到了解决方案。评论说明。

Answer 1

简单的方法是将<span>放在<a>内，然后在<span>上添加边框。然后在<a>或<span>上打开nessesary padding / margin。

Answer 2

在没有宽度的内联元素上使用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

CSS - 大小调整问题

2 个答案: