如何在边框后面创建阴影？

Question

我有一个包含包含我的文本的 span 元素的锚点。 span 元素具有这些属性

border-bottom: 5px solid #59DFB8;
padding-bottom: 2px;

现在我想在边框后面创建一个阴影，而不是整个文本。在不放弃响应能力的情况下我该怎么做？

.selected {
    border-bottom: 5px solid #59DFB8;
    padding-bottom: 2px;
    box-shadow: 10px 10px 10px #59DFB8;
}

<div class="nav">
    <ul>
        <li><a href="index.html"><span class="selected">Home</span><span class="shadow"></span></a></li>
        <li><a href="">Projects</a></li>
        <li><a href="about.html">About</a></li>
      </ul>
</div>

示例：

Answer 1

您可以使用 :after 或 :before 伪元素来实现。

.selected {
    display: block;
    float: left;
    position: absolute;
    width: 100%;
    border-bottom: 5px solid #59DFB8;
    padding-bottom: 2px;
    box-shadow: 10px 10px 10px #59DFB8;       
}

<div class="nav">
    <ul>
        <li><a href="index.html"><span class="selected">Home</span><span class="shadow"></span></a></li>
        <li><a href="">Projects</a></li>
        <li><a href="about.html">About</a></li>
      </ul>
</div>

我正要详细说明，但我看到伍德罗抢先了我一分钟。 ;p

Answer 2

box-shadow 属性始终使用其包含元素的边界框。您不能将它仅应用于元素的一部分，因此您需要专门为您想要有阴影的部分创建一个元素。

一种解决方案是使用伪元素创建 .selected 元素的子元素，并使该子元素 看起来 像下划线/底部边框。然后你可以应用box-shadow。

使您的 .selected 元素成为行内块，以便其宽度根据其内容调整大小。然后使用 ::after 伪选择器在其中创建一个块元素，大小为父元素的宽度，高度为 5 像素，背景为纯色。

.selected {
    /* so that its bounding box is only as wide as its contents */
    display: inline-block;
}

.selected::after {
    /* pseudo-elements must have content in order to render; give it a blank string */
    content: '';
    /* so it fills the parent horizontally */
    display: block;
    /* adjust to how tall you want the "bottom border" to be */
    height: 5px;
    /* color for the "bottom border" */
    background: #59DFB8;
    /* here's the shadow effect, adjust offsets and color as desired */
    box-shadow: 10px 10px 10px #59DFB8;
}

这是一个完整的示例，其中包含简化的标记和一些额外的样式，使其看起来更像您的示例图片。

ul {
    list-style: none;
    display: block;
    background: #003447;
    padding: 20px;
}

ul li {
    display: inline-block;
    padding-left: 20px;
    padding-right: 20px;
}

ul li a {
    font-family: Arial, sans-serif;
    font-size: 20px;
    color: #59DFB8;
    text-decoration: none;
    text-transform: uppercase;
}

ul li a::after {
    content: '';
    display: block;
    margin-top: 5px;
    height: 2px;
    background: #59DFB8;
}

ul li a.selected::after {
    box-shadow: 0px 0px 10px 1px #59DFB8;
}

ul li a:active::after,
ul li a:hover::after {
    visibility: hidden;
}


ul li a.selected:active::after,
ul li a.selected:hover::after {
    visibility: visible;
}

<ul>
    <li><a href="index.html" class="selected">Home</a></li>
    <li><a href="">Projects</a></li>
    <li><a href="about.html">About</a></li>
</ul>

Answer 3

没有看到您希望它看起来如何的示例，我不得不猜测。该方法可能取决于您想要的效果有多微妙。在这里，我添加了一个带有负扩散和半透明填充的盒子阴影：

a{text-decoration:none; color:#555;}
a:hover, a.active {
    color:#000;
    border-bottom: 5px solid #59DFB8;
    padding-bottom: 2px;
    box-shadow: 0 8px 10px -8px hsl(0, 0%, 40%);
}
.nav ul {margin:0; padding:0; display:flex;}
.nav li {margin:15px; list-style-type:none;}

<div class="nav">
    <ul>
        <li><a href="index.html" class="active">Home</a></li>
        <li><a href="">Projects</a></li>
        <li><a href="">About</a></li>
        <li><a href="">A Long One</a></li>
      </ul>
</div>

如何在边框后面创建阴影？

How can I create a shadow behind a border?

html

css

box-shadow