Question

我正在为一个蚂蚁设计项目创建一个自定义sider切换，我正努力保留盒子阴影的三个边（即顶部，右边，左边）（即2px 2px 8px rgba（0,0,0），0.15））并从左侧完全删除盒阴影/模糊。我最近的尝试如下。有什么想法吗？

JSX：

<span onClick={this.toggleCollapse} className="ant-layout-sider-zero-width-trigger">
  {collapsed ? <Icon type="menu-unfold" /> : <Icon type="menu-fold" />}
</span>

LESS：

.ant-layout-sider-zero-width-trigger {
  background: #fff;
  color: #000000a6;
  box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.15), inset -2px 0px 0px #fff;

  &:hover {
    background: #fff;
  }
}

btw我在Stack上看到过类似的问题，但经过多次实验后，没有一个能为我工作。

Answer 1

一个想法是使用另一个容器并依赖一些溢出：

.container {
  display:inline-block;
  padding:5px 5px 5px 0;
  overflow:hidden;
}

.box {
  width:200px;
  height:50px;
  background: #fff;
  color: #000000a6;
  box-shadow: 
    2px 2px 8px rgba(0, 0, 0, 0.15), 
    inset -2px 0px 0px #fff;
}

<div class="container">
<div class="box">
</div>
</div>

Answer 2

您可以增加阴影的偏移量并减小其大小：

＆＃13;

html {
  background: white;
}

body {
  padding: 2em;
  margin: 2em;
  background: yellow;
  box-shadow: 4px 4px 8px -4px, inset -2px 0px 0px #fff;
}

＆＃13;

从左侧移除箱子阴影

2 个答案: