1

I did not find any answer for my question, even if it is really simple. I am using the CSS proprety box-sizing to do an "inside border" for a div (which is actually a <a>...</a>)

.myDiv{ 
       box-sizing: border-box; 
       -moz-box-sizing: border-box; 
       -webkit-box-sizing: border-box;
       border: 2px solid #3498db;
}

But it seams that it is not working at all as the border is the same without border-box properties. Anyone has an answer?

Just to be sure of what I am doing. What I want is to get a <a> an "inside border". I obviously know the border: ...; property but it is making the element bigger and I don't want that. I would like to have something like border: -2px solid #3498db.

[EDIT] I found a solution. Description on the comments.

4

2 回答 2

1

最简单的方法是在<span>里面放一个<a>，然后在里面放一个边框<span>。然后将必要的填充/边距放在 the<a>或<span>.

于 2013-11-06T22:43:24.473 回答
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);
}

演示

于 2013-11-06T23:12:34.317 回答