如何在邊框后面創建陰影？

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;
}

---

這是一個完整的示例，帶有簡化的標記和一些額外的 styles，使其看起來更像您的示例圖像。

 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 偽元素來做到這一點。

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