今天在布局的时候,有一处需要同时用到border-image和border-radius。
但这两个刚好不能同时使用,会照成border-radius无法正常生效。
经过同事指定,网上也有类似教程,可能本人笨吧,没咋看明白。
直接上代码
通过使用padding设置border
使用background替换border线性渐变效果
(一开始我按照其他教程去做,其实能做出来,却是有一处自己有个样式没处理好,导致以为不完美。按照别人教程做的时候,一定要看清自己代码结构)
<!DOCTYPE html>
<html lang="en">
<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">
<title>Document</title>
<style>
.bg{
width: 100px;
height: 100px;
background:linear-gradient(0deg, #E3C296, #4F9A9F);
padding: 10px;
border-radius: 10px;
}
.div{
width: 100px;
height: 100px;
background: #000;
border-radius: 10px;
}
</style>
</head>
<body>
<div class="bg">
<div class="div"></div>
</div>
</body>
</html>
更新一下
最近业务总是需要使用到这一技巧
但有时候总会忘记额外给个父级元素
遂采用纯背景颜色方法
width: 160px;
height: 160px;
border: solid 4px transparent;
border-radius: 50%;
background-image: linear-gradient(#1c1f53, #1c1f53),
linear-gradient(-30deg, #62b3ff, #cf5bff);
background-origin: border-box;
background-clip: content-box, border-box;