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

2019-06-29
CSS
768

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

图片描述

代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>border img</title>

  <style>
    .demo {
      width: 200px;
      height: 50px;
      border-image-source: linear-gradient(132deg, #00fcff, #009eff);
      border-style: solid;
      border-width: 5px;
      border-image-slice: 1;
    }
  </style>
</head>
<body>
  <div class="demo">

  </div>
</body>
</html>

但是,当给元素来个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-radiusborder-image-source不能一起使用,晕。。。

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

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

  1. 一个外层div这个用border的渐变
  2. 内层div,水平垂直居中,遮盖外层中间部分,边角部分就是border了。

代码:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>border img</title>

  <style>
    .demo {
      width: 200px;
      height: 100px;
      background-image: linear-gradient(132deg, #00fcff, #009eff);
      border-radius: 50px;
      box-sizing: border-box;
      position: relative;
      display: flex;

    }

    .true-demo {
      width: 190px;
      height: 90px;
      background: wheat;
      border-radius: 50px;
      box-sizing: border-box;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);

    }
  </style>
</head>
<body>
  <div class="demo">
    <div class="true-demo"></div>
  </div>
</body>
</html>

效果如图

图片描述

扫码体验小程序版