1

含まれている div の背景を示す中央のレイヤーで、その周りに 3 つのレイヤーの境界線を持つボタンを作成しようとしています。例は千の言葉に値するので、どうぞ

http://jsfiddle.net/e5Sxt/2/

html

<div id="content">
    <p>Generic Content</p>
    <button class="button">Search</button>
</div>

CSS

#content{
    width: 500px;
    height: 500px;
    background-color: black;
    padding: 50px;
    color: white;
}

button{
    margin-top: 50px;
    padding: 20px;
    text-align: center;
    background-color: #333;
    box-shadow: 0 0 0 5px #666, 0 0 0 10px red, 0 0 0 15px #bbb;
    border: none;
    cursor: pointer;
}

赤いボックスの影は、含まれている div の黒が通過する場所です。このレイヤーのボックス シャドウが透明に設定されている場合、その下のボックス シャドウが透けて見えます。

これまでのところ、アウトライン、ボーダー、およびボックス シャドウを利用しようとしましたが、役に立ちませんでした。現時点では、外側の境界線と背景を表示するためのパディングを使用して、ボタンを別の div でラップする必要があると思いますが、別の html 要素を追加せずにこれを行うことができるかどうかを確認したかったのです。

ありがとう！

4

2 に答える 2

2

残念ながら、これを行う唯一の方法はラッパーを使用することだと思います。ボタンの背景を通して透明度を得ることができるかどうかはわかりません。

ただし、背景色がわかっている場合は、明らかにそれを境界線で使用できますが、もちろん、これは背景のグラデーションでは機能しません。

これは、色を知っていることを示す提案された jsFiddle と、ラッパーを使用した別のものです。

http://jsfiddle.net/eD6xy/

HTML:

<div class="box one-div">(1 div, know color)</div>

<div class="two-div">
  <div class="box">(2 divs, pure transparent)</div>
</div>

CSS:

/* 
  With one div, works fine with a constant color (#abc)
  But with gradient, probably won't match up correctly
*/
.one-div {
  margin: 15px 10px;
  border: 5px solid blue;
  box-shadow: 0 0 0 5px #abc,
              0 0 0 10px red;
}

.two-div {
  margin-top: 30px;
  padding: 5px;
  border: 5px solid red;
}

.two-div > .box {
  border: 5px solid blue;
}
于 2013-08-13T21:03:00.640 に答える