CSS3之border-image的使用
最近,我在项目开发中遇到这样的问题。

要给这个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的使用的更多相关文章
- css3学习--border
http://blog.sina.com.cn/s/blog_61671b520101gelr.html border-radius border-radius: 50px 20px;上下都是50px ...
- css3实现border渐变色
案例1 .box{ width: 100px; height: 100px; border:10px solid #ddd; border-image: -webkit-linear-gradient ...
- css3 做border = 0.5px的细线
参考: https://blog.csdn.net/Tyro_java/article/details/52013531
- CSS3 用border写 空心三角箭头 (两种写法)
之前一直在寻找这种空心三角箭头, 终于知道了原理! 自己记录一下,顺便分享给之前跟我一样想要的撸友们~ 第一种写法 利用常见的 after伪元素 <!DOCTYPE html> <h ...
- css3动画使用技巧之—border旋转时的应用。
<html> <head> <title>css3动画border旋转时的应用.</title> <meta charset="UTF- ...
- css3图形绘制
以下几个例子主要是运用了css3中border.bordr-radius.transform.伪元素等属性来完成的,我们先了解下它们的基本原理. border:简单的来说border语法主要包含(bo ...
- css3之图形绘制
由于近期的项目中出现了不规则的边框和图形, 所以重新温习一下CSS3的图形绘制...样式绘制的图形比图片的性能要好,体验更佳,关键一点是更加有趣! 以下几个例子主要是运用了css3中border.bo ...
- 总结html
1.初识html W3C : 万维网联盟!(World Wide Web Consortium ) 创建于1994年,是web技术领域最权威最具有影响力的标准机构! W3C规定 ...
- 你务必知道的css简写
欢迎加入前端交流群来py:749539640 简写属性是可以让你同时设置其他几个 CSS 属性值的 CSS 属性.使用简写属性,Web 开发人员可以编写更简洁.更具可读性的样式表,节省时间和精力. ...
- CSS3 笔记一(Rounded Corners/Border Images/Backgrounds)
CSS3 Rounded Corners The border-radius property is a shorthand property for setting the four border- ...
随机推荐
- ARTS Week 8
Dec 16, 2019 ~ Dec 22, 2019 Algorithm Problem 53 Maximum Subarray 最大子数组 题目链接 题目描述:给定一个数组,在所有连续的子数组中, ...
- Python3(七) 正则表达式与JSON
一. 初识正则表达式 1.定义:是一个特殊的字符序列,可以帮助检测一个字符串是否与我们所设定的字符序列相匹配. 2.作用:可以实现快速检索文本.实现替换文本的操作. 3.场景: 1.检测一串数字是否是 ...
- linux shell 操作 mysql命令(不进入mysql操作界面)
由于需要,需要将一系列mysql的操作制作成.sh文件,只需要shell操作bash命令就可以傻瓜式的完成黑盒任务. #!/bin/bash mysql -uroot -p??? -e "c ...
- tomcat 访问权限设置
1.全局设置,设置允许某些IP能够访问到tomcat服务器,或不能访问tomcat服务器 只需要编辑tomcat的server.xml,增加适当代码即可. 修改如下:在<Host> &l ...
- 怎么用wait、notify巧妙的设计一个Future模式?
我们知道多线程可以实现同时执行多个任务(只是看起来是同时,其实是CPU的时间片切换特别快我们没感觉而已). 现在假设一个做饭的场景,你没有厨具也没有食材.你可以去网上买一个厨具,但是这段时间,你不需要 ...
- K8S 容器挂载Windows 文件共享目录,访问出现Permission denied的解决办法
K8S Pod,Docker 容器挂载Windows主机目录,访问相应的文件出现Premission denied的权限访问问题 Windows远程共享目录为//192.168.61.115/huas ...
- golang单元测试简述
Golang中内置了对单元测试的支持,不需要像Java一样引入第三方Jar才能进行测试,下面将分别介绍Golang所支持的几种测试: 一.测试类型 Golang中单元测试有功能测试.基准测试. ...
- Spark之RDD本质
1.在一个完整的数据转换流程里往往涉及到多个具有衍生关系RDD,这些RDD其实是通过逻辑串联来利用装饰器模式层层包装扩展的的一堆对象,这些相邻RDD间必须有继承关系.并且比Java中的装饰器来的更彻底 ...
- redis 5.0.7 源码阅读——跳跃表skiplist
redis中并没有专门给跳跃表两个文件.在5.0.7的版本中,结构体的声明与定义.接口的声明在server.h中,接口的定义在t_zset.c中,所有开头为zsl的函数. 一.数据结构 单个节点: t ...
- mysql在建表语句中添加索引
普通索引创建 创建普通索引,即不添加 UNIQUE.FULLTEXT 等任何参数. [例]创建表名为 score 的数据表,并在该表的 id 字段上建立索引,SQL 语句如下: CREATE tabl ...