border-radius中的渐变失效解决

边框颜色渐变遇到border-radius的时候会失效是今天同事发现的

回来谈一波怎么搞~

就是运用到padding+background-image这两个属性来搞。

直接上代码

//html
//画外壳
<div class="container">
      <div class="box"></div>
    </div>

//scss
 .container{
    width: 100px;
    height: 150px;
    box-sizing: border-box;
    padding: 5px;
    border-radius: 5px;
    background-image: -webkit-linear-gradient(0deg, rgba(36, 196, 255, 1), rgba(0, 87, 194, 1));
    background-image: -moz-linear-gradient(0deg, rgba(36, 196, 255, 1), rgba(0, 87, 194, 1));
    background-image: linear-gradient(0deg, rgba(36, 196, 255, 1), rgba(0, 87, 194, 1));
    }

• 看起来

加点东西

//scss
.box {
		width: 100%;
		height: 100%;
		border-radius: 5px;
		background: saddlebrown;
	}

• 效果

色眼有点直男，大概 就是这样啦bye！