css渐变色圆角边框和背景渐变色，并且所有颜色都是透明色！！！

原创已于 2025-09-29 10:49:58 修改 · 241 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端 #css3

于 2025-04-30 12:06:44 首次发布

话不多说直接贴代码！

<!DOCTYPE html>
<head>
  <meta charset="utf-8" />
  <meta
    name="viewport"
    content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0"
  />
  <style>
    body {
      color: #fff;
      background-color: #0e7c64;
    }
    .box-bg {
      position: absolute;
      top: 150px;
      left: 50px;
      width: 200px;
      height: 100px;
      border-radius: 20px;
      padding: 1px;
      background: linear-gradient(
        45deg,
        rgba(255, 255, 255, 0.09),
        rgba(255, 255, 255, 0.8)
      );
      mask: linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0) border-box;
      mask-composite: exclude;
    }
    .box {
      position: absolute;
      top: 150px;
      left: 50px;
      width: 202px;
      height: 102px;
      padding: 14px;
      box-sizing: border-box;
      border-radius: 20px;
      background: linear-gradient(
        to right,
        rgba(255, 255, 255, 0.1) 0%,
        rgba(255, 255, 255, 0.25) 100%
      );
    }
  </style>
</head>
<body>
  <div class="box-bg"></div>
  <div class="box">内容内容</div>
</body>

效果图：