【CSS】透明背景的圆角渐变边框实现方案

这篇具有很好参考价值的文章主要介绍了【CSS】透明背景的圆角渐变边框实现方案。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

css的渐变边框可以用下面方式实现

border-image: linear-gradient(rgb(89, 0, 255),pink) 30 30;

css的圆角边框可以用下面方式实现

border-radius: 20px;

那想要实现一个圆角的渐变边框呢,可能会以为,两个都用上不就可以了,但事实是,这两个属性并不兼容,所以要实现一个圆角的渐变边框,就得需要曲线救国的方法了

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no" />
    <!-- <link rel="icon" href="<%= BASE_URL %>favicon.ico" /> -->
    <title>渐变边框</title>
  </head>
  <style>
    
    body{
      background: linear-gradient(60deg, #dfdee1, #edabb5);
    }
    .demo{
      width: 200px;
      height: 60px;
      position: relative;
      border-radius: var(--border-radius);
     --border-width: 3px;
     --border-radius: 10px;
     --border-color:  linear-gradient(270deg, rgba(148, 135, 253, 1), rgba(143, 246, 226, 1));
     background: transparent;
    }
    .demo::after {
     content: "";
     position: absolute;
     left: 0;
     top: 0;
     width: 100%;
     height: 100%;
     padding: var(--border-width);
     border-radius: var(--border-radius);
     background: var(--border-color);
     --mask-bg: linear-gradient(red, red);
     --mask-clip: content-box, padding-box;
     -webkit-mask-image: var(--mask-bg), var(--mask-bg);
     -webkit-mask-clip: var(--mask-clip);
     -webkit-mask-composite: destination-out; 
    }
    </style>
    
    <body>
     <div class="demo"></div>
    </body>
</html>

最终效果图

【CSS】透明背景的圆角渐变边框实现方案,css,前端

 文章来源地址https://www.toymoban.com/news/detail-640106.html

 

到了这里,关于【CSS】透明背景的圆角渐变边框实现方案的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • css实现渐变边框动画

    2024年02月15日
    浏览(37)
  • CSS3属性详解(一)文本 盒模型中的 box-ssize 属性 处理兼容性问题:私有前缀 边框 背景属性 渐变 前端开发入门笔记(七)

    CSS3是用于为HTML文档添加样式和布局的最新版本的层叠样式表 (Cascading Style Sheets)。下面是一些常用的CSS3属性及其详细解释: border-radius:设置元素的边框圆角的半径。可以使用四个值设置四个不同的圆角半径,也可以只使用一个值来设置统一的圆角。 box-shadow:创建一个元

    2024年02月08日
    浏览(50)
  • css圆角边框怎么设置

    css+div是页面设计的法宝,通过css+div能够设计出各种效果!本文给大家简单介绍下css圆角边框怎么设置,大家可以参考,也可以直接拿过去使用,当然要修改下具体的参数。 border-radius 属性可以接受一到四个值。规则如下: 圆角边框(border-radius)的基本用法:border-radius 属性

    2024年02月02日
    浏览(93)
  • CSS基础-边框和圆角

    CSS中用border 定义边框属性。 border语法:border:[宽度][样式][颜色] 其中: 宽度:边框的宽度,单位可以使px、em、rem 等单位,也可以使用thin、medium、thick 三种预设值 样式:边框的样式,值可以是 solid(实线),dashed(虚线),dotted(点线)等多种样式。 样式值 意思 solid 实线 dashed 虚线

    2024年02月12日
    浏览(55)
  • css 边框渐变

    需求: 普通的div 边框不好看,做一个渐变色 进程: 最简单的当然是做一个内部是白色的边框是渐变色的图,然后使用 background: url(\\\"back.jpg\\\") ,这样看起来就像是做了一个渐变的边框 如果做不了图,可以做一个渐变的背景如何用白底把中间的覆盖掉 这个当border 有弧度的时候

    2024年01月18日
    浏览(43)
  • CSS 渐变边框及动画

    转载请注明出处,点击此处 查看更多精彩内容 用 CSS 实现渐变边框及动画,下面对关键点进行解释说明,查看完整代码及预览效果请 点击这里。 简单说明原理:使用伪元素 ::before 绘制一个渐变色,然后使用伪元素 ::after 绘制背景,使其遮住渐变色的一部分,仅保留边框部分

    2024年02月16日
    浏览(60)
  • 带圆角的虚线边框?CSS 不在话下

    今天,我们来看这么一个非常常见的切图场景,我们需要一个带圆角的虚线边框,像是这样: 这个我们使用 CSS 还是可以轻松解决的,代码也很简单,核心代码: 但是,原生的 dashed 有一个问题,就是我们 无法控制虚线的单段长度与间隙 。 假设,我们要这么一个效果呢虚线

    2024年02月05日
    浏览(53)
  • CSS中如何实现元素的渐变背景(Gradient Background)效果?

    前端入门之旅:探索Web开发的奇妙世界 欢迎来到前端入门之旅!感兴趣的可以订阅本专栏哦!这个专栏是为那些对Web开发感兴趣、刚刚踏入前端领域的朋友们量身打造的。无论你是完全的新手还是有一些基础的开发者,这里都将为你提供一个系统而又亲切的学习平台。在这个

    2024年02月10日
    浏览(55)
  • css颜色渐变到透明怎么写

    在 CSS 中,可以使用 background-image 属性来实现颜色渐变到透明的效果。 具体方法是使用 linear-gradient 函数,该函数接受两个或多个颜色作为参数,并在这些颜色之间进行线性渐变。 例如,要从蓝色渐变到透明,可以使用以下代码: 这会在 .my-element 元素的背景上创建一个从蓝

    2024年02月12日
    浏览(31)
  • css 怎么绘制一个带圆角的渐变色的边框

    1,可以写两个样式最外面的div设置一个渐变的背景色。里面的元素使用纯色。但是宽高要比外面元素的小。可以利用里面的元素设置padding这样挡住部分渐变色。漏出来的渐变色就像边框一样。 div class=\\\"cover-wrapper\\\"    div class=\\\"item-cover\\\"    /div /div .cover-wrapper{      background:

    2024年01月19日
    浏览(48)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包