类似于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. http及浏览器相关知识点归纳

    http是应用层协议,采用请求/响应模型 1.浏览器地址栏输入URL地址后发生了什么? 浏览器判断地址是否是合理的URL地址,是否是http协议请求,如果是则进入下一步 浏览器对此URL进行缓存检查: ...

  2. Android开发 处理拍照完成后的照片角度

    private void initImageAngle(){ Bitmap imageBitmap = BitmapFactory.decodeFile(FilePathSession.getFace ...

  3. odoo 在更多下面直接调用方法

    <record id="action_get_qc_result" model="ir.actions.server"> <field nam ...

  4. 自己整理的一个访问SQLite3数据库的C++类

    原文地址:自己整理的一个访问SQLite3数据库的C++类作者:vigra 近日,对SQLite3的使用进行了研究.真不愧是优秀的嵌入数据库,API接口也极其简捷.基本上只要使用以下几个接口就能完成数 ...

  5. linux 软件 手动添加至桌面或启动栏

    1.创建软连接(也可以不用创建软连接,直接写绝对路径) sudo ln -s /opt/eclipse/eclipse /usr/bin/eclipse 2.创建desktop文件 sudo gedi ...

  6. CobaltStrike进阶篇-批量上线

    前言 当获取一台目标服务器权限时,更多是想办法扩大战果,获取目标凭据并横向进行登陆是最快速的拿权方式.但目标所处环境是否可出网,如何利用CobalStrike进行批量上线,正是本文所要讲述的内容. 获 ...

  7. webstorm中使用git管理服务器上的代码——入门级

    一.首先要确保电脑已经成功安装好git了.(记住git的安装位置) 二.这里需要给webstorm配置一下:依次点击:file –> Settings –> Version Control ...

  8. 关于SqlServer的内连接，外链接以及left join,right join之间的一些问题与区别。

    就我个人理解通俗点来说内连接和外连接区别: 内连接 inner join或者 join (被默认为内连接) : 内连接的原理是:先进行语句判断和运行得出结果,然后在将结果连接起来,一般是横着连接. 外 ...

  9. 密码学笔记(4)——RSA的其他攻击

    上一篇详细分析了几种分解因子的算法,这是攻击RSA密码最为明显的算法,这一篇中我们考虑是否有不用分解模数n就可以解密RSA的密文的方法,这是因为前面也提到,当n比较大的时候进行分解成素数的乘积是非常困 ...

  10. day 45 前端CSS

      前端CSS   CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素,给HTML设置样式,让它更加美观. 当浏览器读到一个样式表,它就会按照这个样式 ...