最近,我在项目开发中遇到这样的问题。

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

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

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

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

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

.register-search .navbar__title__underline {
padding-bottom: .8rem; border: .125rem solid transparent;
-webkit-border-image:url(../images/blueline@3x.png) ; /* Safari 5 */
-o-border-image:url(../images/blueline@3x.png) ; /* Opera */
border-image:url(../images/blueline@3x.png) ;
}

这段代码的要点为:

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

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

这里详细介绍下border-image。

border-image的第一个参数是边框图片路径,即border-image-source。

border-image的第二个参数是border-image-slice,即可按上右下左的顺序切割背景图。

如图所示,30% 35% 40% 30%即是像上图一样进行剪裁,裁剪所形成的矩形即为边框。若只是单纯的数字,则默认单位是px。

border-image的第三个参数是border-image-repeat。

例如,这张图作为边框背景图,菱形的对角线为30px。

border-image: url(border.png)  round;

所对应的效果为

另外,

border-image: url(border.png)  stretch;

所对应的效果为

stretch是默认值。

于是,要实现切下来的图位于边框底部的效果,则上边切0px,右边切0px,下边切6px,左边切0px。即

border-image:url(../images/blueline@3x.png)    ;

这样整张边框图就直接落在了边框底部,从而实现需求。

虽然这段代码在电脑和安卓手机上都能成功显示蓝线,但是在ios上不显示蓝线。

解决方法:

把border样式拆成

border-width: .125rem;
border-style: solid;

即可成功显示。

CSS3之border-image的使用的更多相关文章

  1. css3学习--border

    http://blog.sina.com.cn/s/blog_61671b520101gelr.html border-radius border-radius: 50px 20px;上下都是50px ...

  2. css3实现border渐变色

    案例1 .box{ width: 100px; height: 100px; border:10px solid #ddd; border-image: -webkit-linear-gradient ...

  3. css3 做border = 0.5px的细线

    参考: https://blog.csdn.net/Tyro_java/article/details/52013531

  4. CSS3 用border写 空心三角箭头 (两种写法)

    之前一直在寻找这种空心三角箭头, 终于知道了原理! 自己记录一下,顺便分享给之前跟我一样想要的撸友们~ 第一种写法 利用常见的 after伪元素 <!DOCTYPE html> <h ...

  5. css3动画使用技巧之—border旋转时的应用。

    <html> <head> <title>css3动画border旋转时的应用.</title> <meta charset="UTF- ...

  6. css3图形绘制

    以下几个例子主要是运用了css3中border.bordr-radius.transform.伪元素等属性来完成的,我们先了解下它们的基本原理. border:简单的来说border语法主要包含(bo ...

  7. css3之图形绘制

    由于近期的项目中出现了不规则的边框和图形, 所以重新温习一下CSS3的图形绘制...样式绘制的图形比图片的性能要好,体验更佳,关键一点是更加有趣! 以下几个例子主要是运用了css3中border.bo ...

  8. 总结html

    1.初识html W3C : 万维网联盟!(World Wide Web Consortium )   创建于1994年,是web技术领域最权威最具有影响力的标准机构!           W3C规定 ...

  9. 你务必知道的css简写

    欢迎加入前端交流群来py:749539640   简写属性是可以让你同时设置其他几个 CSS 属性值的 CSS 属性.使用简写属性,Web 开发人员可以编写更简洁.更具可读性的样式表,节省时间和精力. ...

  10. CSS3 笔记一(Rounded Corners/Border Images/Backgrounds)

    CSS3 Rounded Corners The border-radius property is a shorthand property for setting the four border- ...

随机推荐

  1. 简明 homebrew

    介绍 包管理工具几乎已经成为现代操作系统或者开发平台不可或缺的工具软件,无论做开发,或是管理服务器,都免不了用到一些第三方依赖包.包管理工具的基本功能就是提供一个集中的平台,可以在这里找到大部分流行的 ...

  2. ubuntu 14.04 安装gvim 后报出warning

    (gvim:3572): GLib-GObject-WARNING **: Attempt to add property GnomeProgram::sm-connect after class w ...

  3. 一台电脑上配置多个git的ssh key

    前几天公司的代码库全部迁移到了阿里云上,在配置git的ssh key的时候遇到了一个问题,那就是自己的密钥在添加时提示已经存在,原来是自己的个人账号上已经添加过这个密钥了,公司分配的账号就不能再添加这 ...

  4. 面试官:你连RESTful都不知道我怎么敢要你? 文章解析

    面试官:你连RESTful都不知道我怎么敢要你?文章目录01 前言02 RESTful的来源03 RESTful6大原则1. C-S架构2. 无状态3.统一的接口4.一致的数据格式4.系统分层5.可缓 ...

  5. linux下安装php的svn模块

    在php下为了方便使用svn命令,还是安装下php的svn扩展 首先确保机器上已经有lamp或lnmp环境,然后 >yum install subversion subversion-devel ...

  6. [redis读书笔记] 第三部分 多机数据库的实现 复制

    另外一篇写的很好很深入的文章:http://www.tuicool.com/articles/fAnYFb : RDB持久化 http://www.tuicool.com/articles/F3Eri ...

  7. finalize的用法

    public class GC {          public static GC SAVE_HOOK = null;          public static void main(Strin ...

  8. 论文《Entity Linking with Effective Acronym Expansion, Instance Selection and Topic Modeling》

    Entity Linking with Effective Acronym Expansion, Instance Selection and Topic Modeling 一.主要贡献 1. pro ...

  9. Shell脚本 硬盘监控

    用shell 写了一个硬盘监控的小程序   #!/bin/bash MAX=95 EMAIL=zonghua@iyunshu.com PART=sda1   IP=`ifconfig |grep -w ...

  10. PHP关于mb_substr不能起作用的问题

    mb_substr不能起作用最大的原因是因为没有在php.ini文件没有把 ;extension=mbstring 前面的 :号去掉