css实现边框渐变色/文字渐变色

最新推荐文章于 2025-05-25 23:10:07 发布

原创最新推荐文章于 2025-05-25 23:10:07 发布 · 304 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

标签

#css #前端

收录于

css 实现边框渐变色

在这里插入图片描述

<style>
.border-style-3 {
  position: relative;
  width: 200px;
  height: 100px;
  &::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(60deg, aquamarine, cornflowerblue, goldenrod, hotpink, salmon, lightgreen, sandybrown, violet);
    background-size: 300%;
    z-index: -2;
    border-radius: 5px;
  }
  &::after {
     content: '';
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     width: calc(100% - 10px);
     height: calc(100% - 10px);
     z-index: -1;
     background: white;
     border-radius: 5px;
  }
  &> .content {
      padding: 10px;
  }
}
</style>
<body>
    <div class="border-style-3">
    </div>
</body>

css 实现文字渐变色

在这里插入图片描述

.content{
 			padding: 10px;
            background-image: linear-gradient(60deg, aquamarine, cornflowerblue, goldenrod, hotpink, salmon, lightgreen, sandybrown, violet);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            font-size: 20px;
            font-weight: bold;
}

关注博主即可阅读全文