CSSの内枠ですか？

Question

私はCSSで左にボタンを作成しました。 div内のdivです。ただし、右の3つのボタンはimgタグのbackgroundプロパティです。私はこれをして、hereの指示に従ったロールオーバー効果をシミュレートすることができました。

さて、CSSを使用して、他の3に、最初のボタンのように、内側の境界線を追加する方法はありますか？

フィドールhere。

Answer 1

をbox modelによると、パディングがコンテンツとの間にあります境界。あなたも、あなたの純粋なCSSボタンのため、これを達成するために余分なdiv秒を必要としないはず

.img-btn { 
    background: #FFF; // inner border color 
    padding: 2px; // inner border width 
    border: 2px solid #[yourgreen]; // outer border 
} 

：あなたは次のように画像をスタイルすることができるはずです。

.img-btn { 
    background: #FFF url('your.img') no-repeat; 
    padding: 2px; 
    border: 2px solid #[yourgreen]; 
    width: [image width]; 
    height: [image height]; 
    background-position: center center; 
} 

前述したようにここでダブルボーダーのDEMOです：画像を背景画像である場合、スタイルに続いて、場合です。

Answer 2

ボタンの場合と同じ方法を使用します。アイコンを内部のdivに背景画像として扱うだけです。ですから、白い境界線と（あなたのケースのIMGの）いくつかのパディング、内部のdivを持つdiv要素、および背景画像が必要です（アイコン）

Answer 3

アイコン画像を直接変更できないと仮定して、「カートに入れる」と同じ方法でdivにラップしてください。白のボーダーが」doesnのように、あなたはまた、少し背景を縮小する

background-size: 24px 24px; 

アイコンが小さくIMG内の中心に置かれたままことを保証するために

background-position: center center; 

のいずれかを使用する必要があり、および/または

ますシンボルにぶつかりません。

Answer 4

あなたは、ボタン操作を行うために、2つの<divs>と<a>を必要としません。あなたは単一の<a>でそれを行うことができます。画像とボタンの両方で、外側の境界を行うにはbox-shadowを使用できます。 <img>要素にbackground-imagesを置きます。

デモ：http://jsfiddle.net/ThinkingStiff/bNmzB/

出力：

HTML：

<a id="add" href="#">Add To Cart</a> 
<img id="facebook" class="icon" /> 
<img id="twitter" class="icon" /> 
<img id="email" class="icon" /> 

CSS：

#add { 
    background-color: #9bc9c7; 
    border: 1px solid white; 
    box-shadow: 0 0 0 2px #9bc9c7; 
    color: white; 
    display: inline-block; 
    font: normal 13px/25px Helvetica, Arial, Sans Serif; 
    height: 25px; 
    margin-right: 6px; 
    text-align: center; 
    text-decoration: none; 
    text-transform: uppercase; 
    width: 120px; 
    vertical-align: top; 
} 

#add:hover { 
    background-color: #eabeb2; 
    box-shadow: 0 0 0 2px #eabeb2; 
} 

.icon { 
    background-color: rgb(155, 201, 199); 
    border: 1px solid white; 
    box-shadow: 0 0 0 2px rgb(155, 201, 199); 
    height: 25px; 
    margin-right: 3px; 
    width: 25px;  
}