0

コンテナの端に黒い境界線を追加しようとしていますが、不透明度は 15% である必要があります。境界プロパティを追加すると、境界線は端の周りではなく、コンテナの内側に表示されます。なぜこれが起こっているのか、私は立ち往生しています。

CSS

.container {
    width: 945px;
    margin: 0 auto;
}

.content {
    margin: 15px auto 0;
}

.main {
    padding: 15px;
    background: #252525;
    border: 2px solid rgba(0,0,0,0.15);
    color: #fff;
}

HTML

<div class="content container">
    <div class="main">
               ...
    </div>
</div>

期待される結果

ここに画像の説明を入力

実結果

ここに画像の説明を入力

4

2 に答える 2

2

に追加borderし.containerます。

もう 1 つの方法は、透明な背景を.containerに設定して を設定すること.main margin:2pxです。

于 2013-09-02T17:16:32.763 に答える
1

別のオプションは、background-clipプロパティを使用することです。

.main {
   border: 5px rgba(0,0,0,.15);
   border-style: solid;
   background: #252525;
   /* The background will not go behind the border */
   background-clip: padding-box;

    color: #fff;
    height: 200px;
}

JsFiddle: http://jsfiddle.net/2KBPn/

ドキュメンテーション

于 2013-09-02T17:33:45.693 に答える