类似于android的.9图片，目的是为了防止图片因为内容的扩展而导致图片拉伸失真。

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <style>

         div{

             width: 200px;

             height: 300px;

             border: 1px solid #000;

             box-sizing: border-box;

             padding: 26px;

             /*添加边框图片*/

             /*border-image-source: url("../images/border1.png");

             !*设置裁切区域*!

             border-image-slice: 27;

             !*边框的宽度默认宽度等于当前元素的边框宽度

             注意：边框图片相当于背景，并不会对容器的内容区域的大小产生任何的影响，所以可能会造成内容与边框图片的重叠*!

             border-image-width: 27px;

             !*设置边框图利的拉伸和平铺*!

             border-image-repeat: round;

             !*设置边框的扩展*!

             border-image-outset: 0px;*/

             /*简写：border-image:source slice / width / outset repeat*/

             border-image: url("../images/border1.png") 27 / 27px  round;

         }

     </style>

 </head>

 <body>

 <div>边框的宽度默认宽度等于当前元素的边框宽度边框的宽度默认宽度等于当前元素的边框宽度</div>

 </body>

 </html>

实例：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        div{

            width: 300px;

            border: 1px solid #ccc;

            padding:10px;

            border-image-source: url("../images/btn_bg.png");

            /*fill:填充中间区域*/

            border-image-slice: 10 fill;

            border-image-width: 10px;

        }

    </style>

</head>

<body>

<div>注意：边框图片相当于背景，并不会对容器的内容区域的大小产生任何的影响，所以可能会造成内容与边框图片的重注意：

边框图片相当于背景，并不会对容器的内容区域的大小产生任何的影响，所以可能会造成内容与边框图片的重叠注意：

边框图片相当于背景，并不会对容器的内容区域的大小产生任何的影响，所以可能会造成内容与边框图片的重叠注意：

边框图片相当于背景，并不会对容器的内容区域的大小产生任何的影响，所以可能会造成内容与边框图片的重叠注意

：边框图片相当于背景，并不会对容器的内容区域的大小产生任何的影响，所以可能会造成内容与边框图片的重叠注意：

边框图片相当于背景，并不会对容器的内容区域的大小产生任何的影响，所以可能会造成内容与边框图片的重叠注意：

边框图片相当于背景，并不会对容器的内容区域的大小产生任何的影响，所以可能会造成内容与边框图片的重叠叠</div>

</body>

</html>

H5C3--边框图片的更多相关文章

  1. 第 23 章 CSS3 边框图片效果

    学习要点: 1.属性初探 2.属性解释 3.简写和版本 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS3 中边框图片背景的效果,通过这个新属性让边框更加的丰富多彩. 一．属性解释 CSS3 提 ...

  2. Retina视网膜屏中CSS3边框图片像素虚边的问题

    虽然CSS3新增了这个功能,但是在W3school里面并没有给出具体详细的解释,还好网上不乏大神给你我们很全面的解释其中的原理-css3:border-image边框图像详解 边框图片的原理是四个角不 ...

  3. CSS第四天总结 更多的属性 圆角 边框图片 段落属性 颜色渐变 盒子阴影

    圆角边框: border-radius    一个值时表示四个角用的圆半径,4个值时分别是左上角.右上角.左下角.右下角,单位可以是px和百分比,百分比是半径相对于边框长度的比例 在CSS3中我们终于 ...

  4. CSS3之边框图片border-image

    CSS3中有关border的属性,还有很多,今天我将为大家介绍一个很好玩的属性——Border-image.有了CSS3之边框图片Border-image,我们可以轻松搞定圆角,轻松搞定很多之前难搞的 ...

  5. 第八十节，CSS3边框图片效果

    CSS3边框图片效果 学习要点: 1.属性初探 2.属性解释 3.简写和版本 本章主要探讨HTML5中CSS3中边框图片背景的效果,通过这个新属性让边框更加的丰富多彩. 一．属性解释     CSS3 ...

  6. CSS3 02. 边框、边框圆角、边框阴影、边框图片、渐变、线性渐变、径向渐变、背景、过渡transition、2D转换

    边框圆角 border-radius 每个角可以设置两个值,x值.y值 border-top-left-radius:水平半径 垂直半径 border-radius:水平半径/垂直半径 border- ...

  7. 从零开始学 Web 之 CSS3（四）边框图片，过渡

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  8. 鼠标滑过图片添加边框图片无位移[xyytit]

    实现下面的效果,鼠标滑过图片添加边框图片无位移——鼠标滑过,图片只是加了边框,不会晃动: 参考代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML ...

  9. CSS3边框图片-像素虚边的问题

    虽然CSS3新增了这个功能,但是在W3school里面并没有给出具体详细的解释,还好网上不乏大神给你我们很全面的解释其中的原理-css3:border-image边框图像详解 边框图片的原理是四个角不 ...

  10. css3 border img 边框图片

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

随机推荐

  1. golang 高效字符串拼接

    https://blog.csdn.net/u012210379/article/details/45110705 虽然方便,但是使用+=操作符并不是在一个循环中往字符串末尾追加字符串最有效的方式,一 ...

  2. [JZOJ5232] 【NOIP2017模拟A组模拟8.5】带权排序

    题目 题目大意 有一个数列AAA,数列上的每个数都是在[li,ri][l_i,r_i][li​,ri​]范围内随机的数. 将这个数列进行稳定排序,得到每个位置在排序后的排名pip_ipi​. f(A) ...

  3. 廖雪峰Java12maven基础-1maven入门-3构建流程

    maven是一个Java项目管理和构建工具: 标准化项目结构 标准化构建流程(编译.打包.发布) 依赖管理 Maven的构建流程 clean 删除所有编译生成的文件 compile 编译源码.编译测试 ...

  4. Oracle使用语句块之循环插入数据

    1.业务要求:  将oracle表A的整表的数据一次性导入到表B中 , 以A_ID为外键关联. (*******如果开发环境和实际生产环境的数据一致,而且数据量比较小情况,可以直接手动添加数据; ** ...

  5. 跳表上线性dp——1150D 好题！

    题目设计的很好,感觉做了这题对dp的状态有了更深的理解 /* 先预处理序列自动机 dp[i][j][k]表示匹配到i,j,k时的最靠前的位置 那么现在A串加入了一个字母,我们要求的就是dp[i+1][ ...

  6. html+css简单的实现360搜索引擎首页面

    今天主要学习了是如何实现的,以及我在写这个页面的时候我所遇到的一些困难. 主要实现是用代码的,不说废话了,其实我是想说我走的坑有哪些. 1.代码的基础不好,元素的一些属性不熟悉,对于HTML和css还 ...

  7. TensorFlow实战Google深度学习框架-人工智能教程-自学人工智能的第二天-深度学习

    自学人工智能的第一天 "TensorFlow 是谷歌 2015 年开源的主流深度学习框架,目前已得到广泛应用.本书为 TensorFlow 入门参考书,旨在帮助读者以快速.有效的方式上手 T ...

  8. VC控件DateTimePicker使用方法

    出自http://www.cnblogs.com/52yixin/articles/2111299.html 使用DateTimePicker控件一般是获 取其时间替代手工输入带来的不便,而DateT ...

  9. Chsh- Linux必学的60个命令

    1.作用 chsh命令的作用是更改使用者shell设定,它的使用权限是所有使用者. 2.格式 chsh [ -s ] [ -list] [ --help ] [ -v ] [ username ] 3 ...

  10. Linux实现自动登录

    使用expect实现自动登录的脚本,网上有很多,可是都没有一个明白的说明,初学者一般都是照抄.收藏.可是为什么要这么写却不知其然.本文用一个最短的例子说明脚本的原理. 脚本代码如下: #!/usr/b ...