如何使邊框陰影，而其他人有鋒利的邊界

我想添加陰影效果只有單邊框，而其他邊框有清晰的邊框。 CSS是否有這種力量，或者有其他技術我不知道？如何使邊框陰影，而其他人有鋒利的邊界

#panel { 
    -moz-box-shadow:0 1px 10px #00c6ff; 
    -webkit-box-shadow: 0 1px 10px #00c6ff; 
    box-shadow:0 1px 10px #00c6ff; 
    width:25%; 
    height: 50px; 
    background-color:#161616; 
    color: #fff; 
    margin: 20px auto; 
    text-align: center; 
    }

HTML

<div id="panel"> 
<p>Panel Content</p> 
</div>

我試圖做這樣的事情

enter image description here

來源

2015-02-11 Dragut

而不是box-shadow，你可以使用：僞元素與linear-gradient。

#panel { 
 
    position: relative; 
 
    width: 25%; 
 
    height: 50px; 
 
    background-color: #161616; 
 
    color: #fff; 
 
    margin: 20px auto; 
 
    text-align: center; 
 
} 
 
#panel:after { 
 
    position: absolute; 
 
    content: ''; 
 
    width: 100%; 
 
    height: 100%; 
 
    top : -10px; 
 
    left: 0; 
 
    background: linear-gradient(0deg, #00c6ff, #00c6ff calc(100% - 20px), rgba(0, 198, 255, 0)); 
 
    z-index: -1; 
 
}

<div id="panel"> 
 
    <p>Panel Content</p> 
 
</div>

來源

2015-02-11 23:26:10

很酷，萬分感謝！ – Dragut 2015-02-12 11:27:04

像這樣：

box-shadow: 0px -8px 5px -5px #00c6ff;

第四值是sprea d半徑。正值會導致陰影擴大並變大，負值會導致陰影縮小。如果未指定，則它將爲0（陰影將與元素的大小相同）。

所以基本上你會使陰影比你的盒子小，並且確保它只在一側伸出。

陰影與邊界無關。他們彼此獨立。沒有像「邊界影子」那樣的東西。

來源

2015-02-11 22:31:35 sebnukem

實際上沒有100％尖銳或至少98％鋒利的邊緣，是有可能隱藏其他邊界的一種方式或另一種？ – Dragut 2015-02-11 22:37:19

如果陰影完全放在盒子下面，它會100％銳利。 – sebnukem 2015-02-11 22:37:48

如何使邊框陰影，而其他人有鋒利的邊界

回答

相關問題