Question

我正在寻找一种方法，只在div的一侧放置一个boxshadow。这段代码不能做我想要的（它在一侧放置一个盒子形状，但顶部和底部比中间轻）。

＆＃13;

.myDiv {
  border: 1px solid #333;
  width: 100px;
  height: 100px;
  -webkit-box-shadow: 10px 0 5px -2px #888;
  box-shadow: 10px 0 5px -2px #888;
}

＆＃13;

<div class="myDiv"></div>

＆＃13;

无论如何，顶部和底部的透明度与中间相同。似乎是boxshadow的问题，它使用了半径。

我的div的不透明度为0.5，我希望它越来越向右消失，但使用上面的代码，它适用于div的中间部分，但在顶部和底部有一个清晰的边缘。

Answer 1

使用具有线性渐变背景的伪元素

＆＃13;

  .myDiv {
  border: 1px solid #333;
  width: 100px;
  height: 100px;
  margin: 1em auto;
  position: relative;
  box-sizing: border-box;
}

.myDiv::after {
  content: "";
  position: absolute;
  top: -1px;
  left: 100%;
  height: 100px;
  width: 10px;
  background: linear-gradient(to right, #888, transparent);

＆＃13;

<div class="myDiv"></div>

＆＃13;

Answer 2

一个想法是使用带有伪元素的box-shadow，创建一个溢出然后用容器隐藏它：

.myDiv {
  border: 1px solid #333;
  position: relative;
  width: 100px;
  height: 100px;
}
.content {
  display:inline-block;
  padding-right:10px;
  overflow:hidden;
}
.myDiv:before {
  content: "";
  position: absolute;
  z-index:-1;
  top: -20px;
  bottom: -20px;
  right: 0;
  left: 0;
  -webkit-box-shadow: 10px 0 5px -2px #888;
  box-shadow: 10px 0 5px -2px #888;
}

<div class="content">
  <div class="myDiv"></div>
</div>

Answer 3

您也可以使用多个半透明阴影;）

＆＃13;

.myDiv {
  border: 1px solid #333;
  width: 100px;
  height: 100px;
  box-shadow:   10px 0 rgba(0,0,0,0.1),
                 9px 0 rgba(0,0,0,0.1),
                 8px 0 rgba(0,0,0,0.1),
                 7px 0 rgba(0,0,0,0.1),
                 6px 0 rgba(0,0,0,0.1),
                 5px 0 rgba(0,0,0,0.1),
                 4px 0 rgba(0,0,0,0.1),
                 3px 0 rgba(0,0,0,0.1),
                 2px 0 rgba(0,0,0,0.1),
                 1px 0 rgba(0,0,0,0.1);
}

＆＃13;

<div class="myDiv"></div>

＆＃13;

div的1侧的CSS Box阴影。但没有半径

3 个答案: