ボーダー画像の境界線の外枠

Question

画像を投稿していないので、問題をよりよく理解するためにここにlink to the imageがあります。

1） div、枠なし。

2） divと境界線（黄色は青の上です）。

3）これは私が必要とするものです（黄色は下に輪郭が描かれています）。

CSS：

.thediv { 
width: 500px; 
height: 200px; 
background: #0000FF; 
-moz-border-image: url(img.png) 12 1 round; 
-webkit-border-image: url(img.png) 12 1 round; 
-ms-border-image: url(img.png) 12 1 round; 
border-image: url(img.png) 12 1 round; 
border-style: solid; 
border-width: 0 0 10px; 
} 

HTML：

<div class="thediv"></div> 

T彼はコードはこのようなものでなければなりません問題の2つの単語：

Iは、新しいHTMLタグや絶対的なプロパティを使わずにdivの外に枠を移動する必要があります。問題約

つ以上の単語：画像上

E XAMPLE 2は、イエロー1下の青の背景を持っています。黄色の背景はボーダー（img.png）です。問題は、img.png半分（またはほとんどの）透明を使用すると青色が表示され、私はこれを望まないということです。また、絶対値（:before:after）を使用したくありません。私はいくつかのエレガントなアプローチを探しています。

Answer 1

私は理解しているように、いくつかの透明な領域を持つ.png画像を使用しています。

これをボーダーイメージとして使用した結果、divの背景がこのボーダーイメージを介して表示されます。

要素のレイアウトボックスの特定の領域にバックグラウンドを制限できるプロパティーがあります。background-clipがあります。

Background-Clip @ MDN

背景クリップCSSプロパティは、要素の背景色又は画像のいずれかが、その境界の下に延びているかどうかを指定します。

SupportはIE9で、アップ

この場合、あなただけの背景はパディング（とないボーダー）のエッジに拡張したいです。

ので：

.thediv { 
 
    width: 500px; 
 
    height: 50px; /* for demo */ 
 
    background: #0000FF; 
 
    border-style: solid; 
 
    border-width: 0 0 30px; /* for demo */ 
 
    border-color: rgba(255, 0, 0, 0.5); 
 
    margin-bottom: 1em; 
 
    ; 
 
} 
 
.clip { 
 
    background-clip: padding-box; 
 
    ; 
 
}

<div class="thediv"></div> 
 

 
<div class="thediv clip"></div>

あなたはクリッピングして、 "クリッピング" することなく、境界線と背景が組み合わされ、見ることができるように、境界線が一人で立っています。

Answer 2

box-sizingプロパティをcontent-boxと設定します。これにより、ボックスの幅から枠線が除外されます。どこかでbox-sizing: border-box;と設定されていると思います。以下のCSSを使用してください：

.thediv { 
    box-sizing: content-box; 
}