css3背景和border渐变色写法,和使用border-image后,border-radius无效的问题

渐变色问题

css3背景渐变色写法:

#box {
    width: 100px;
    height: 50px;
    /* background-image: linear-gradient(90deg, rgba(33, 30, 190, 0.8),
        rgba(153, 120, 29, 0.8) 20%, rgba(214, 214, 23, 0.8) 70%,
        rgba(37, 158, 91, 0.8)); */
   /*  等同于 */
  background-image: linear-gradient(to right, rgba(33, 30, 190, 0.8),
        rgba(153, 120, 29, 0.8) 20%, rgba(214, 214, 23, 0.8) 70%,
        rgba(37, 158, 91, 0.8));
  }
image.png

css3 border渐变色写法:

#box {
    width: 100px;
    height: 50px;
    border: 1px solid;
    border-image: linear-gradient(to right, rgba(0, 255, 255, 0.8),
        rgba(255, 255, 0, 0.8) 20%, rgba(255, 255, 0, 0.8) 80%,
        rgba(0, 255, 255, 0.8)) 1;
  }

同样可以把to right 换成90deg。


image.png

如果只要一个方向渐变,可以参考以下写法:

border: 1px solid;
    border-image: linear-gradient(to left, rgba(0, 255, 255, 0),
        rgba(68, 2, 189, 0.8) 20%, rgba(212, 104, 3, 0.8) 80%,
        rgba(0, 255, 255, 0)) 1;
image.png

关于使用border-image后,border-radius无效的问题

方法一和方法二都是通过padding来实现,给父节点设置渐变背景,通过padding模拟边框(此处的padding值就是border需要的值),注意父元素和子元素的border-radius属性值保持一致。

方法一:

#box {
    width: 100px;
    height: 50px;
    position: relative;
    border: 4px solid transparent;
    border-radius: 16px;
    background: linear-gradient(orange, violet);
    background-clip: padding-box;
    padding: 10px;
    /* just to show box-shadow still works fine */
  }

  #box::after {
    position: absolute;
    top: -4px;
    bottom: -4px;
    left: -4px;
    right: -4px;
    background: linear-gradient(red, blue);
    content: '';
    z-index: -1;
    border-radius: 16px;
  }
image.png

方法二:

<body>
  <div id="box">
    <div class="content"></div>
  </div>
</body>
#box {
    width: 100px;
    height: 100px;
    box-sizing: border-box;
    padding: 5px;
    border-radius: 50%;
    background-image: -webkit-linear-gradient(top, red 0%, blue 30%, yellow 60%, green 90%);
    background-image: -moz-linear-gradient(top, red 0%, blue 30%, yellow 60%, green 90%);
    background-image: linear-gradient(top, red 0%, blue 30%, yellow 60%, green 90%);
  }

  .content {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: #fff;
  }
image.png

方法三:

给父元素设置border-radius即可

#box {
    width: 100px;
    height: 100px;
    border: 5px solid transparent;
    border-radius: 10px;
    overflow: hidden;
  }

  .content {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    border: 5px solid;
    border-image: linear-gradient(to right, #0a0aa7, rgb(134, 13, 13)) 1;
  }
image.png
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1、属性选择器:id选择器 # 通过id 来选择类名选择器 . 通过类名来选择属性选择器 ...
    Yuann阅读 1,656评论 0 7
  • css3 简介:与H5一样,css3就是css的一个新版本,新增了很多功能让开发更便捷有趣 现状:浏览器支持程度较...
    印象rcj阅读 371评论 0 0
  • CSS参考手册 一、初识CSS3 1.1 CSS是什么 CSS3在CSS2.1的基础上增加了很多强大的新功能。目前...
    没汁帅阅读 3,627评论 1 13
  • 陆游:山盟虽在,锦书难托 文|筠心 陆游以诗闻名,外号小李白,一生近万首诗,两宋第一人也。他的《十一月四日风雨大作...
    筠心_阅读 1,880评论 8 29
  • 快乐是什么? 小松鼠的眼里 一颗松果就是快乐 把一个一个小小的快乐串起来 人生的路就能走下去 (本来只想画一只小松...
    平凡的我和我阅读 359评论 3 4