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

要给这个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. ARTS Week 8

    Dec 16, 2019 ~ Dec 22, 2019 Algorithm Problem 53 Maximum Subarray 最大子数组 题目链接 题目描述:给定一个数组,在所有连续的子数组中, ...

  2. Python3(七) 正则表达式与JSON

    一. 初识正则表达式 1.定义:是一个特殊的字符序列,可以帮助检测一个字符串是否与我们所设定的字符序列相匹配. 2.作用:可以实现快速检索文本.实现替换文本的操作. 3.场景: 1.检测一串数字是否是 ...

  3. linux shell 操作 mysql命令(不进入mysql操作界面)

    由于需要,需要将一系列mysql的操作制作成.sh文件,只需要shell操作bash命令就可以傻瓜式的完成黑盒任务. #!/bin/bash mysql -uroot -p??? -e "c ...

  4. tomcat 访问权限设置

    1.全局设置,设置允许某些IP能够访问到tomcat服务器,或不能访问tomcat服务器 只需要编辑tomcat的server.xml,增加适当代码即可. 修改如下:在<Host>  &l ...

  5. 怎么用wait、notify巧妙的设计一个Future模式?

    我们知道多线程可以实现同时执行多个任务(只是看起来是同时,其实是CPU的时间片切换特别快我们没感觉而已). 现在假设一个做饭的场景,你没有厨具也没有食材.你可以去网上买一个厨具,但是这段时间,你不需要 ...

  6. K8S 容器挂载Windows 文件共享目录,访问出现Permission denied的解决办法

    K8S Pod,Docker 容器挂载Windows主机目录,访问相应的文件出现Premission denied的权限访问问题 Windows远程共享目录为//192.168.61.115/huas ...

  7. golang单元测试简述

      Golang中内置了对单元测试的支持,不需要像Java一样引入第三方Jar才能进行测试,下面将分别介绍Golang所支持的几种测试: 一.测试类型   Golang中单元测试有功能测试.基准测试. ...

  8. Spark之RDD本质

    1.在一个完整的数据转换流程里往往涉及到多个具有衍生关系RDD,这些RDD其实是通过逻辑串联来利用装饰器模式层层包装扩展的的一堆对象,这些相邻RDD间必须有继承关系.并且比Java中的装饰器来的更彻底 ...

  9. redis 5.0.7 源码阅读——跳跃表skiplist

    redis中并没有专门给跳跃表两个文件.在5.0.7的版本中,结构体的声明与定义.接口的声明在server.h中,接口的定义在t_zset.c中,所有开头为zsl的函数. 一.数据结构 单个节点: t ...

  10. mysql在建表语句中添加索引

    普通索引创建 创建普通索引,即不添加 UNIQUE.FULLTEXT 等任何参数. [例]创建表名为 score 的数据表,并在该表的 id 字段上建立索引,SQL 语句如下: CREATE tabl ...