css⼀⼝⽓实现切⾓+边框+投影+内容背景⾊渐变
单纯⽤css实现切⾓+边框+投影+内容背景⾊渐变所有效果，因为UI没给背景切图，寻思这个理论上⽤css就能实现。
看⼀下最终要实现的效果：
⾸先不谈内容紫蓝⾊渐变，⼀个单纯的四切⾓+⿊⾊边框+轮廓投影，其实就直接⽤⽹上铺天盖地的background:linear-gradient 实现切⾓+ 套⼀层⼩了1px的伪元素实现边框 + filter: box-shadow实现投影就⾏了，效果和代码如下：
<html>
<body>
<div class="box"></div>
</body>
<style>
body {
background-color: #55486b;
}
.box {
margin: 20px;
width: 200px;
height: 200px;
z-index: 0;
background: linear-gradient(
135deg,
transparent calc(10px + 1 * 0.414px),
#18121a 0
)
box shadow怎么设置top left,
linear-gradient(
-135deg,
transparent calc(10px + 1 * 0.414px),
#18121a 0
)
top right,
linear-gradient(-45deg, transparent calc(10px + 1 * 0.414px), #18121a 0)
bottom right,
linear-gradient(45deg, transparent calc(10px + 1 * 0.414px), #18121a 0)
bottom left;
background-size: 55% 50%;
background-repeat: no-repeat;
position: relative;
filter: drop-shadow(1px 1px 2px rgba(255, 255, 255, 0.3));
}
.box::after {
z-index: 1;
width: calc(100% - 2 * 1px);
height: calc(100% - 2 * 1px);
content: "";
display: block;
background: linear-gradient(135deg, transparent 10px, #3c2f4f 0) top left,
linear-gradient(-135deg, transparent 10px, #3c2f4f 0) top right,
linear-gradient(-45deg, transparent 10px, #3c2f4f 0) bottom right,
linear-gradient(45deg, transparent 10px, #3c2f4f 0) bottom left;
background-size: 55% 51%;
background-repeat: no-repeat;
position: absolute;
left: 1px;
top: 1px;
}
</style>
</html>
相当于四个⾓斜⽅向⽤⼀⼩段透明⾊+⼀⼤段背景⾊拼凑起来实现的切⾓，background-size要⼤于50%以免有⽩⾊线bug。⼤的div⾥再套⼀层⼩的伪元素实现边框。但由于是四块背景⾊拼起来的，所以要实现整个内容渐变看起来不可能了。
要实现内容区域也是渐变的，那么换种思路，之间⾥⾯那层伪元素background是渐变的，四个切⾓通过其他属性来切掉，这样就有其他的实现⽅法了，先来看看：
⽅法⼀：mask遮罩
其他东西不变，之前伪元素那块是和外层⼀样的思路实现切⾓，这种思路下是⽆法做到垂直渐变的（因为切⾓已经是通过斜对⾓透明⾊渐变做的），那么直接把背景⾊写成渐变，通过mask遮罩属性来将四个切⾓变透明：
.box::after {
z-index: 1;
width: calc(100% - 2 * 1px);
height: calc(100% - 2 * 1px);
content: "";
display: block;
background: linear-gradient(180deg, #3c2f4f, #2e2269);
-webkit-mask: linear-gradient(135deg, transparent 10px, #3c2f4f 0) top
left,
linear-gradient(-135deg, transparent 10px, #3c2f4f 0) top right,
linear-gradient(-45deg, transparent 10px, #3c2f4f 0) bottom right,
linear-gradient(45deg, transparent 10px, #3c2f4f 0) bottom left;
-webkit-mask-size: 55% 51%;
-webkit-mask-repeat: no-repeat;
position: absolute;
left: 1px;
top: 1px;
}
稍许更改⼀下上⾯的代码⾥伪元素的样式，就实现了。
⽅法⼆：clip-path
clip-path属性可以直接修剪掉元素周围的边界，如果直接运⽤在上⾯伪元素，会发现投影也被遮盖了，那么换个思路，我们索性不要伪元素那⼀层，直接把div修剪出4个切⾓。因为filter属性可以叠加，将其⽗元素添加filter，前n+1个drop-shadow叠加起来形成⼀个类似⿊⾊边框，最后⼀个drop-shadow来实现浅⽩⾊投影。效果如下：
<html>
<body>
<div class="outer">
<div class="box"></div>
</div>
</body>
<style>
body {
background-color: #55486b;
}
.outer {
filter: drop-shadow(0px 0px 1px #18121a) drop-shadow(0px 0px 1px #18121a)        drop-shadow(0px 0px 1px #18121a)
drop-shadow(2px 1px 3px rgba(255, 255, 255, 0.3));
}
.box {
margin: 20px;
width: 200px;
height: 200px;
border-radius: 12px;
position: relative;
background: linear-gradient(180deg, #3c2f4f, #2e2269);
-webkit-clip-path: polygon(
20px 0%,
calc(100% - 20px) 0%,
100% 20px,
100% calc(100% - 20px),
calc(100% - 20px) 100%,
20px 100%,
0 calc(100% - 20px),
0 20px
);
clip-path: polygon(
20px 0%,
calc(100% - 20px) 0%,
100% 20px,
100% calc(100% - 20px),
calc(100% - 20px) 100%,
20px 100%,
0 calc(100% - 20px),
0 20px
);
position: relative;
}
</style>
</html>
不知道还有没有更简单且兼容性更好的⽅法~~~~

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。