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

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

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

使您的.selected元素内联块，使其宽度根据其内容而定。然后使用::after伪选择器在其中创建一个块元素，其大小与父元素的宽度相同，高度为5px，背景为纯色。

.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 2

您可以使用：after或：before psudo-element进行操作。

.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 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>

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

3 个答案: