| css边框渐变background: linear | 您所在的位置：网站首页 › css设置border渐变 › css边框渐变background: linear |
css边框渐变background: linear
|
今天在布局的时候，有一处需要同时用到border-image和border-radius。 但这两个刚好不能同时使用，会照成border-radius无法正常生效。 经过同事指定，网上也有类似教程，可能本人笨吧，没咋看明白。 直接上代码 通过使用padding设置border 使用background替换border线性渐变效果 （一开始我按照其他教程去做，其实能做出来，却是有一处自己有个样式没处理好，导致以为不完美。按照别人教程做的时候，一定要看清自己代码结构） Document .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; }
更新一下 最近业务总是需要使用到这一技巧 但有时候总会忘记额外给个父级元素 遂采用纯背景颜色方法 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;
|
【本文地址】
公司简介
联系我们