border-image

它是下面几个值的简写:

border-image-source // 使用绝对或相对地址url,引入图片

border-image-slice   //切割图片,取值支持:<number> 或<percentage>其中number是没有单位的,

border-image-width //边框图片的宽度

border-image-outset //边框向外延伸的距离

border-image-repeat //边框如何重复取值有: stretch | repeat | round

它的默认值是:none 100% 1 0 stretch。

none:是border-image的默认值,如果取值为none时,表示边框无背景图片。

使用 border-image 时,其将会替换掉border-style 属性所设置的边框样式。

此外,规范要求使用 border-image 时边框样式必须存在。

border-image的工作原理就是九宫格伸缩法:把图片切割成九块,然后把他们应用到边和角。

上面的原图,应用到边框上效果如下:

border:15px solid red;
border-image: url(https://mdn.mozillademos.org/files/4127/border.png) 30 ;

border-image: url(https://mdn.mozillademos.org/files/4127/border.png) 30 repeat;//增加了repeat属性 效果如下

小应用:生成老式信封的边框样式

border-image可以运用渐变生成类似信封边框样式

div {
padding: 1em;
border: 16px solid transparent;
border-image: 16 repeating-linear-gradient(-45deg, red 0,red 1em,
transparent 0,transparent 2em,blue 0,blue 3em,transparent 0,transparent 4em );
max-width: 20em;
}

效果图:

此外,通过background和渐变生成蚂蚁行军的边框。

@-webkit-keyframes ants { to { background-position: 100% 100% } }
div{
-webkit-animation: ants 12s linear infinite;
padding: 1em;
border: 1px solid transparent;
background: linear-gradient(white, white) padding-box,
repeating-linear-gradient(-45deg, black 0, black 25%, transparent 0, transparent 50%) 0 / .6em .6em;

效果图(静态的):

当然,border-image还有个强大的技巧就是搭配渐变图案:

列如,我们需要有个顶部边框被裁切的效果类似脚注。

我们要做的就是运用border-image加上一条由渐变生成的垂直条纹,而边框的粗细有border中的width来控制。

border-top:.2em solid transparent;
border-image: 100% 0 0 linear-gradient(90deg ,currentcolor 4em,transparent 0);
padding-top: .5em;

 

css3 border-image及连续的图像边框的更多相关文章

  1. CSS揭秘之多重边框&连续的图像边框

    1.多重边框 我们可以通过使用border-image来写一个多重边框,或使用多个元素来模拟多重边框,不过我们有更好的办法来制作一个多重边框,那就是使用box-shadow的第四个参数(称为扩张半径) ...

  2. css实现连续的图像边框

    有时我们想把一个图片应用为边框,而不是背景,最简单的办法是使用两个HTML元素,一个元素用来把我们的石雕图片设置为背景,另一个元素用来存放内容,并设置纯白背景,然后覆盖在前者之上,这个方法需要一个额外 ...

  3. css3学习总结3--CSS3图像边框

    border-image属性 .className{ border-image:url(/course/54d1cae088dba03f2cd1fec1/img/border.png) 20 20 2 ...

  4. css3 border img 边框图片

    摘自http://www.html-js.com/article/CSS3-tutorial-css3borderimage-frame-image-Xiangjie-on border-image摘 ...

  5. css3: background-image使用多个背景图像

    CSS3 允许元素使用多个背景图像. background-image: url(img/ic_ms.png),url(img/icon_dutyfree_invite.png); <!DOCT ...

  6. CSS3利用一个div实现内圆角边框效果

    *首先要清楚的是,box-shadow的形状会随着border-radius变化.下面的例子可以证明: <!doctype html> <html lang="en&quo ...

  7. CSS3实现原腾讯视频透明边框,多重边框等(关于边框那些不为人知的事情)

    1.hsla或rgba实现半透明边框. rgba在rgb的基础上增加了透明通道,就不详细说了,下面重点说下hsla: 说明: HSLA(H,S,L,A) 取值: H:Hue(色调).0(或360)表示 ...

  8. css3 使用SVG做0.5px 的边框细线

    .HalfPixelLine{ background: repeat-x top left url("data:image/svg+xml;utf8,<svg xmlns='http: ...

  9. CSS3 border属性的妙用

    .ribbon { background: #45c9c8; position: absolute; width: 75px; height: 25px; line-height: 25px; top ...

随机推荐

  1. js实现斐波那契数列

    1:递归 function fb1(n){     if(n <= 2){         return 1;        }else{         return fb1(n-1) + f ...

  2. 解决CentOS查询不到ip

    问题:登陆操作系统,输入ip addr 也可以输入ifconfig查看ip,发现ens33目录中没有inet属性 解答:查看ens33的网卡配置: vi /etc/sysconfig/network- ...

  3. elementtaryos root密码更改

    在elementtaryos 终端中使用root 账户但不幸忘记密码怎么办?请进行如下操作...... 1.进入高级选项选中recovery mode 2.按e编辑,找到recovery nomode ...

  4. cmd命令窗口相关操作指南

    cmd命令窗口打开方式:win+R cmd 1.盘符切换 d: 回车 (d为磁盘名) 2.查看当前目录下的文件和文件夹 输入dir 3.进入指定目录(若需跨盘符操作,应先切换盘符) cd(空格)+绝对 ...

  5. 更改CMD默认的初始路径

    一直用CMD开启本地服务,每一次都得切换路径,有点尴尬.记录一下,修改CMD默认路径 1.打开注册表编辑器(WIN+R打开运行.输入regedit,或者直接找到路径,双击打开C:\Windows\re ...

  6. GitHub(hexo)博客页面访问量错误以及中文乱码解决

    如果访问量不显示(乱码形状),是因为不蒜子域名更新,所以你的域名也需要更新 <script async src="//busuanzi.ibruce.info/busuanzi/2.3 ...

  7. hibernate框架的搭建

    1 导入所需的jar包 1 导入hibernate必须的jar包 2 导入驱动包 2 创建数据库,准备表,实体 1 创建hibernate数据库 CREATE DATABASE hibernate; ...

  8. Column 'orders' in order clause is ambiguous

    今天报了这个错误 原因是.当使用sql查询语句,使用了join查表.但是这个orders没指定是哪张表的字段 ,发生在自关联情况

  9. PHP邮件发送

    php带有内置的mail() 发送邮件函数,但是较为繁琐:建议上网下载一个PHPMailer:

  10. JS的从理解对象到创建对象

    JavaScript不是一门真正的面向对象语言,因为它连最基本的类的概念都没有,因此它的对象和基于类的语言中的对象也会有所不同.ECMA-262把对象定义为:“无序属性的集合,其属性可以包含基本值.对 ...