首页 > Web开发 > 详细

CSS3之border-image的使用

时间:2020-02-24 18:19:16      阅读:33      评论:0      收藏:0      [点我收藏+]

标签:div   borde   ges   afa   代码   相关   

最近,项目中遇到这样的问题。

技术分享图片

 

 要给这个tab的底部蓝线左右加上圆角。

技术分享图片

 

然而,这个元素确实如上图所示,只是active的时候加了个underline的类,蓝线并没有单独的html。

若给这个span加上border-bottom-left-radius和border-bottom-right-radius也只能给蓝线的下半部分加上圆角。

然后,我突然想到了CSS3的border-image属性,也许可以解决这个问题。

然后,我查阅了相关资料,解决了上面的问题。代码为:

.register-search .navbar__title__underline {
    padding-bottom: 0.8rem;

    border: 0.125rem solid transparent;
    -webkit-border-image:url(../images/[email protected]) 0 0 6 0; /* Safari 5  */
    -o-border-image:url(../images/[email protected]) 0 0 6 0; /* Opera */
    border-image:url(../images/[email protected]) 0 0 6 0;
}

 这段代码的要点为:

1.设置border的宽度,并且设置为透明。

2.让设计师切出设计图的蓝线,然后用border-image引用,调好上右下左的切割位置即可。

CSS3之border-image的使用

标签:div   borde   ges   afa   代码   相关   

原文:https://www.cnblogs.com/luoyihao/p/12357897.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 bubuko.com 版权所有 鲁ICP备09046678号-4
打开技术之扣,分享程序人生!
             

鲁公网安备 37021202000002号