border-image-source 和 boder-radius 不兼容问题

aisuhua 发布于2019-08-02 15:25 / 3061人阅读

摘要：在前端实现设计稿过程中，经常遇到这种渐变的情况。如下代码但是，当给元素来个立马就变了样代码和不能一起使用，晕。。。遇到这种问题，有人可能要问设计师要个渐变的背景图了。其实，换个思路，也很好解决。

在前端实现设计稿过程中，经常遇到 border-image-source 这种border渐变的情况。如下

代码




  
  border img

但是，当给元素来个border-radius 立马就变了样：

代码：

.demo {
      width: 200px;
      height: 100px;
      border-image-source: linear-gradient(132deg, #00fcff, #009eff);
      border-style: solid;
      border-width: 5px;
      border-image-slice: 1;
      border-radius: 50px;
      background: #000;
      box-sizing: border-box;
    }

border-radius 和 border-image-source不能一起使用，晕。。。

遇到这种问题，有人可能要问设计师要个渐变的背景图了。

其实，换个思路，也很好解决。

一个外层div这个用border的渐变

内层div，水平垂直居中，遮盖外层中间部分，边角部分就是border了。

代码：




  
  border img

GPU云服务器云服务器 vmware虚拟机和云服务器不兼容兼容问题兼容性问题 Js的兼容问题

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/54114.html

border-image-source 和 boder-radius 不兼容问题

摘要：在前端实现设计稿过程中，经常遇到这种渐变的情况。如下代码但是，当给元素来个立马就变了样代码和不能一起使用，晕。。。遇到这种问题，有人可能要问设计师要个渐变的背景图了。其实，换个思路，也很好解决。在前端实现设计稿过程中，经常遇到 border-image-source 这种border渐变的情况。如下 showImg(https://segmentfault.com/img/bVbu...

DDreach 2019-08-30 11:17 评论0 收藏0
详解css3之border-image

摘要：属性用来指定边框所需素材的路径，语法可以参照。当图片碰到边界时，如果超过则被截断。图片会根据边框的尺寸动态调整图片的之间的间距直至正好可以铺满整个边框。如下图后续是属性所以存在兼容性问题，需要在属性前面设置等 border-image简介 css3中新增了一个属性border-image，这个属性允许开发者使用图片来定义边框,扩充了 CSS2 中仅有的几个预定义边框样式(border-...

jackzou 2019-08-21 10:46 评论0 收藏0
CSS魔法堂：重拾Border之——图片作边框

摘要：一铺搞定一铺清袋粤语的一铺搞定其实就是一次完成全部工作的意思，上面关于的属性，要是每次都逐个设置那要敲多少次键盘啊。。。语法粤语的一铺清袋其实就是把之前的成果一次性归零。前言当CSS3推出border-radius属性时我们是那么欣喜若狂啊，一想到终于不用再添加额外元素来模拟圆角了，但发现border-radius还分水平半径和垂直半径，然后又发现border-top-left/...

linkFly 2019-08-30 12:59 评论0 收藏0
巧用CSS遮罩

摘要：用法样式是利用该属性指定的图片作为遮罩，利用这张图像的透明度来显示位于该遮罩图下方的图像。其实可以利用变色，而利用遮罩去绘制图标。遮罩透过的地方是图标的填色部分，而遮罩盖过的地方则没有颜色。 1. 用法 -webkit-mask样式是利用该属性指定的图片作为遮罩，利用这张图像的透明度来显示位于该遮罩图下方的图像。如果遮罩图某个像素点透明度为1则显示下方的图像，透明度为0则不显示，介于0...

cocopeak 2019-08-29 11:03 评论0 收藏0