这篇博客介绍了如何仅使用CSS实现切角、边框、投影以及内容背景的渐变效果。作者首先分享了一种基本方法，利用`background:linear-gradient`和伪元素实现切角和边框，通过`filter: box-shadow`创建投影。然后，作者提出了两种创新思路：一是使用`mask`遮罩属性，二是应用`clip-path`配合`filter`的`drop-shadow`实现所需效果。文章探讨了这两种方法的实现细节，并展示了最终效果。
单纯用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
)
最低0.47元/天 解锁文章
1384
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
