CSS - 大小调整问题

时间:2013-11-06 22:28:18

标签: css html5 css3 web border-box

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

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

2 个答案:

答案 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