css - 如何制作体积阴影css
问题描述
我怎样才能制作这样的阴影(图像示例)。我尝试过使用after
伪元素、半径和剪辑,但结果甚至不接近。
.page{
width: 100%;
display: flex;
justify-content: center;
min-height:100%;
background: #ebebeb;
padding-top: 100px;
padding-bottom: 100px;
}
.sidebar{
width: 260px;
height: 500px;
background: #ebebeb;
position: relative;
}
.sidebar::after{
content: '';
position: absolute;
top: 0;
bottom: 0;
height: 500px;
right: 0;
width: 40px;
box-shadow: 5px 0 20px 0 rgba(0, 0, 0, 0.4);
display: block;
border-radius: 50% / 20px;
clip: rect(auto, 80px, auto, 40px);
}
<div class="page">
<div class="sidebar">Sidebar</div>
<div class="content"></div>
</div>
解决方案
将盒子阴影放在右侧怎么样:
.page{
width: 100%;
display: flex;
justify-content: center;
min-height:100%;
background: #ebebeb;
padding-top: 100px;
padding-bottom: 100px;
}
.sidebar{
width: 260px;
height: 500px;
background: #ebebeb;
box-shadow: 15px 0 15px -15px rgba(0, 0, 0, 0.8);
}
<div class="page">
<div class="sidebar">Sidebar</div>
<div class="content"></div>
</div>
如果您在伪元素上需要它:
.page {
width: 100%;
display: flex;
justify-content: center;
min-height: 100%;
background: #ebebeb;
padding-top: 100px;
padding-bottom: 100px;
}
.sidebar {
width: 260px;
height: 500px;
background: #ebebeb;
position: relative;
}
.sidebar:after {
content: '';
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 100%;
width: 50px;
transform: translateX(-50px);
box-shadow: 15px 0 15px -15px rgba(0, 0, 0, 0.9);
}
<div class="page">
<div class="sidebar">Sidebar</div>
<div class="content"></div>
</div>
有更多曲线(但需要一个内部元素)
.page {
width: 100%;
display: flex;
justify-content: center;
min-height: 100%;
background: #ebebeb;
padding-top: 100px;
padding-bottom: 100px;
}
.sidebar {
width: 260px;
height: 500px;
position: relative;
}
.sidebar .inner {
min-height:100%;
background: #ebebeb;
position: relative;
z-index:2;
}
.sidebar:after {
content:'';
position: absolute;
z-index:1;
bottom: 3%;
left:100%;
transform: translateX(-18px);
width: 15px;
height: 94%;
background: #999999;
border-radius: 15px / 100%;
box-shadow: 0 0 10px 10px #999999;
}
<div class="page">
<div class="sidebar"><div class="inner">Sidebar</div></div>
<div class="content"></div>
</div>
推荐阅读
- javascript - Mapbox 布局可见性闪烁
- c# - 进度报告:需要帮助了解其工作原理
- android - 如何在 macbookpro 2012 i7 上提高 Android Studio 模拟器的速度?
- java - OpenPDF java对元素进行分组以保持在同一页面上
- assembly - 如何将参数传递给汇编程序中的 printf C 函数?
- graphql - 如何从 apollo graphql 解析器获取 cookie?
- excel - 仅将二维数组的某些元素/列写回工作表
- angular - Guard canActivate 在服务实例化之前运行
- java - 如何在android上识别用户?
- python - Python Spark 基于列随机抽样