1

本当に単純な質問であっても、私の質問に対する答えは見つかりませんでした。私は、div (実際には<a>...</a>)の「内側の境界線」を行うために、CSS の適切なボックス サイズ設定を使用しています。

.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。

[編集]解決策を見つけました。コメントの説明。

4

2 に答える 2

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 に答える
1

簡単な方法は、 を の<span>中に入れて<a>から、 に境界線を付けること<span>です。次に、必要なパディング/マージンを か のいずれかに入れ<a>ます<span>。

于 2013-11-06T22:43:24.473 に答える