如何使边框阴影，而其他人有锋利的边界

我想添加阴影效果只有单边框，而其他边框有清晰的边框。 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

如何使边框阴影，而其他人有锋利的边界

回答

相关问题