如何制作边框阴影，而其他人有明显的边框

Question

我试图仅为单边框添加阴影效果，而其他边框有明显的边框。 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>

我试图做这样的事情

Answer 1

像这样：

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

第四个值是扩散半径。正值将导致阴影扩大并变大，负值将导致阴影缩小。如果未指定，则为0（阴影将与元素的大小相同）。

所以基本上你让阴影比你的盒子小，并确保它只在一侧伸出。

阴影与边框无关。它们彼此独立。没有＆＃34;边界阴影＆＃34;。

Answer 2

您可以使用带有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>