Question

我想将框阴影应用到div的上部一半（上部50％）。我尝试了一切但失败了。

    div{
        width: 100px;
        height: 100px;
        background-color: gray;
        margin: auto;
        font-size: 30px;
        box-shadow: 0px 0px 5px 5px;
    }

如上所述：我想将框阴影添加到div的上部一半。

<div>Some text.</div>

Answer 1

您可以使用伪元素添加box-shadow并生成父div高度的伪元素50%。您还需要设置z-index: -1，以便伪元素显示在div。

下

div {
  width: 100px;
  height: 100px;
  background-color: gray;
  margin: auto;
  font-size: 30px;
  position: relative;
}
div:after {
  content: '';
  z-index: -1;
  position: absolute;
  left: 0;
  height: 50%;
  width: 100%;
  box-shadow: 0px 0px 5px 5px;
  top: 0;
}

<div>Some text.</div>

Answer 2

div{
    width: 100px;
    height: 100px;
    background-color: gray;
    margin: auto;
    font-size: 30px;
    border: none;
    border-style: outset;
    border-width: 5px 5px 0 0;
    border-top-left-radius: 5px;
    border-top-color: #6f6f6f;
    border-bottom-right-radius: 5px;
    border-right-color: #0e0e0e;
    box-shadow: inset -2px -14px 47px 1px rgba(56,12,12,0.3);
}

<div>Box</div>

试试这个。

 border: none;
 border-style: outset;
 border-width: 5px 5px 0 0;
 border-top-left-radius: 5px;
 border-top-color: #6f6f6f;
 border-bottom-right-radius: 5px;
 border-right-color: #0e0e0e;
 box-shadow: inset -2px -14px 47px 1px rgba(56,12,12,0.3);

将框阴影添加到div的上半部分

2 个答案: