8

一種の L 字型を形成するために別のボックスが重なっているボックスがあります。L 字型全体の周りにグローを実現しようとしているため、これらのボックスの 1 つの 3 面のみにグローが必要です。

box-shadow プロパティを使用してみましたが、3 つの側面でのみ機能するようには見えません。これを使用する正しい方法ですか、それとも境界線を使用してグローを実現するために使用できる別の方法がありますか? 3面？

これが私が使用しようとしているコードです

-moz-box-shadow: 0 -1px 5px #80abc6;
-webkit-box-shadow: 0 -1px 5px #80abc6;
box-shadow: 0 -1px 5px #80abc6;
4

3 に答える 3

2

クリッププロパティを使用できます。

div {
    width: 100px;
    height: 30px;
    margin: 30px;
    clip: rect(-15px,115px,45px,0);
    position: absolute;

    -moz-box-shadow: 0 -1px 15px #80abc6;
    -webkit-box-shadow: 0 -1px 15px #80abc6;
    box-shadow: 0 -1px 15px #80abc6;
}

デモ: http://jsfiddle.net/QBQJn/

于 2011-11-09T10:39:25.703 に答える
1

これを行う1つの方法は次のとおりです。http://jsfiddle.net/thirtydot/Wec5h/

HTML:

<div id="l">
    <div id="v"></div><div id="h"></div>
</div>

CSS:

#l {
    padding: 20px;
    border: 1px solid red;
    float: left;
}
#v, #h {
    -moz-box-shadow: 0 0 5px #80abc6;
    -webkit-box-shadow: 0 0 5px #80abc6;
    box-shadow: 0 0 5px #80abc6;
    display: inline-block;
    vertical-align: bottom;
    position: relative;
}
#v {
    width: 48px;
    height: 192px;
}
#h {
    width: 96px;
    height: 48px;
}
#v:after {
    content: '';
    position: absolute;
    z-index: 1;
    left: 0;
    right: 0;
    bottom: 38px;
    left: 0;
    height: 20px;
    background: #fff;
}
#h:after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: -10px;
    width: 20px;
    background: #fff;
}
于 2011-11-09T10:36:59.417 に答える
1

css :after プロパティでそれを行うことができます。このような：

div{
    width:100px;
    height:30px;
    -moz-box-shadow: 0 -1px 15px #80abc6;
    -webkit-box-shadow: 0 -1px 15px #80abc6;
    box-shadow: 0 -1px 15px #80abc6;
    margin:30px;
    position:relative;
}
div:after{
    content:'';
    width:10px;
    height:100%;
    background:#fff;
    position:absolute;
    top:0;
    left:-10px;
}

これをチェックしてくださいhttp://jsfiddle.net/QBQJn/1/

于 2011-11-09T12:25:10.453 に答える