从左侧移除框阴影
Remove Box Shadow from Left Side
我正在为一个 ant 设计项目创建一个自定义侧边切换,我正在努力保留框阴影的三个边(即顶部、右侧、左侧)(即 2px 2px 8px rgba(0, 0 , 0, 0.15)) 并从左侧完全删除 box-shadow/blur 。我最近的尝试如下。有什么想法吗?
JSX:
<span onClick={this.toggleCollapse} className="ant-layout-sider-zero-width-trigger">
{collapsed ? <Icon type="menu-unfold" /> : <Icon type="menu-fold" />}
</span>
少:
.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;
}
}
顺便说一句,我在 Stack 上看到过类似的问题,但 none 经过大量实验后对我有用。
一个想法是使用另一个容器并依赖于一些溢出:
.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>
您可以增加阴影的偏移量并减小其大小:
html {
background: white;
}
body {
padding: 2em;
margin: 2em;
background: yellow;
box-shadow: 4px 4px 8px -4px, inset -2px 0px 0px #fff;
}
我正在为一个 ant 设计项目创建一个自定义侧边切换,我正在努力保留框阴影的三个边(即顶部、右侧、左侧)(即 2px 2px 8px rgba(0, 0 , 0, 0.15)) 并从左侧完全删除 box-shadow/blur 。我最近的尝试如下。有什么想法吗?
JSX:
<span onClick={this.toggleCollapse} className="ant-layout-sider-zero-width-trigger">
{collapsed ? <Icon type="menu-unfold" /> : <Icon type="menu-fold" />}
</span>
少:
.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;
}
}
顺便说一句,我在 Stack 上看到过类似的问题,但 none 经过大量实验后对我有用。
一个想法是使用另一个容器并依赖于一些溢出:
.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>
您可以增加阴影的偏移量并减小其大小:
html {
background: white;
}
body {
padding: 2em;
margin: 2em;
background: yellow;
box-shadow: 4px 4px 8px -4px, inset -2px 0px 0px #fff;
}