🍊CSS如何设置同侧边框两种分层颜色 | 您所在的位置:网站首页 › css渐变属性的设置两种颜色怎么设置 › 🍊CSS如何设置同侧边框两种分层颜色 |
我报名参加金石计划1期挑战——瓜分10万奖池,这是我的第1篇文章,点击查看活动详情 最近在还原设计稿的过程中,遇到一个需求,将边框设置为两种固定的颜色,设计稿大概就长这样。👇 首先我们很容易想到使用linear-gradient实现,毕竟八股文之如何使用CSS实现三角形有手动实现过很多次,其中一种方法是可以让渐变色设置成两种固定的颜色,然后将其中一个颜色设置为透明即可~ 那就正好带大家复习一下八股文吧~🕵️ width: 200px; height: 200px; background: linear-gradient(45deg, brown, brown 50%, lightblue 50%, lightblue 100%);
上面我们已经使用linear-gradient成功在盒子背景上设置了两种固定的颜色,我们试试将它应用在我们的边框上吧,let's do it! width: 200px; height: 200px; background: gray; border-left: 2px solid linear-gradient(45deg, brown, brown 50%, lightblue 50%, lightblue 100%);
这时候,就需要查看MDN文档了,由于我们上面用的是简写写法,我们应该去找border-color,我们可以在文档中可以看到它的取值为color。
我们也找到了数据类型,原来是数据类型不通的原因,所以不能应用在border-color上面。 难道在边框上不能使用渐变嘛,正当我想去尝试别的实现方案时,我突然看到了MDN对数据类型的描述是: 是一种CSS 数据类型的子类型,用于表现两种或多种颜色的过渡转变。 嗯哼😏, CSS数据类型的子类型,我突然想到border-image这个属性,或许可以在这上面试试呢,说干就干,border-image: ,ctrl + x, ctrl + v, ctrl + s, alt + tab, F5。 width: 200px; height: 100px; background: gray; border-left: 4px solid ; border-image: linear-gradient(45deg, brown, brown 50%, lightblue 50%, lightblue 100%);一顿操作猛如虎,一看效果零杆五,还是没生效,人麻了。👻 继续看MDN对border-image的解释吧,我看下来是有点懵的,好像说了又好像啥也没说,最后收集资料,总算对border-image属性有了更深刻的认识,推荐大家看一下张鑫旭大大的这篇文章CSS3 border-image详解、应用及jQuery插件。 经过一番折腾终于搞定了!🤔 这里实现了两种分层颜色,如果想设置多种的话可以在linear-gradient上修改即可~ width: 200px; height: 100px; background: gray; border-left: 4px solid ; border-image: linear-gradient(0deg, brown, brown 50%, lightblue 50%, lightblue 100%) 2 2 2 2;
本文介绍了border以及linear-gradient相关的知识点的,我们学会了如何绘制三角形和生成花哨的边框~ 如果这篇文章对你有帮助的话,麻烦点赞收藏哟~ 笔者还有其他专栏,欢迎阅读~ Vue从放弃到入门 深入浅出JavaScript |
CopyRight 2018-2019 实验室设备网 版权所有 |