使用 CSS 为 3 面添加光晕答案

【问题标题】：Adding a glow to 3 sides using CSS使用 CSS 为 3 面添加光晕
【发布时间】：2011-12-25 04:45:55
【问题描述】：

我有一个与另一个重叠形成 L 形的盒子，我试图在整个 L 形周围实现发光，因此只需要在其中一个盒子的 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;

【问题讨论】：

标签： border css glow

【解决方案1】：

您可以使用clip 属性：

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/

【讨论】：

这确实需要元素绝对定位
@YiJian 是的，但他没有说不能绝对。无论如何，它很可能是这样的。 :)

【解决方案2】：

您可以使用 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/

【讨论】：

【解决方案3】：

这是一种方法：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;
}

【讨论】：