css 一口气实现切角+边框+投影+内容背景色渐变

CSS技巧：实现切角+边框+投影+内容渐变

最新推荐文章于 2025-10-28 18:03:24 发布

原创

最新推荐文章于 2025-10-28 18:03:24 发布 · 1.5k 阅读

11 ·

CC 4.0 BY-SA版权

文章标签：

#css #css3 #less

这篇博客介绍了如何仅使用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
          )
          top left,
        linear-gradient(
            -135deg,
            transparent calc(10px +