类似于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. 如果try中有return那么finally中不要有return不然不会执行try中的return

    public class TryExer { public static void main(String[] args) { String test = test(); System.out.pri ...

  2. selenium借助AutoIt识别上传（下载）详解【转】

    AutoIt目前最新是v3版本,这是一个使用类似BASIC脚本语言的免费软件,它设计用于Windows GUI(图形用户界面)中进行自动化操作.它利用模拟键盘按键,鼠标移动和窗口/控件的组合来实现自动 ...

  3. Linux下常用操作

    ************************ 镜像操作 ************************************* screen -s name 新建 screen -r name ...

  4. thinkphp Mongo模型

    Mongo模型是专门为Mongo数据库驱动而支持的Model扩展,如果需要操作Mongo数据库的话,自定义的模型类必须继承Think\Model\MongoModel. Mongo模型为操作Mongo ...

  5. 洛谷 2915 [USACO08NOV]奶牛混合起来Mixed Up Cows

    一道水状压,然而不知道是不是太久没做过dp了,我盯着它二十分钟才反应过来.... 还把数组开小了WA了一发QAQ //Twenty #include<algorithm> #include ...

  6. 洛谷P3694 邦邦的大合唱

    题目背景 BanG Dream!里的所有偶像乐队要一起大合唱,不过在排队上出了一些问题. 题目描述 N个偶像排成一列,他们来自M个不同的乐队.每个团队至少有一个偶像. 现在要求重新安排队列,使来自同一 ...

  7. Vue-element 的 resetFields of undefined报错

    触发场景:添加表单弹框,当我信息保存成功后会报 [Vue warn]: Error in event handler for "click": "TypeError: C ...

  8. php中Sessions

    PHP Sessions  Session 中文译名叫做“会话”,其本来的含义是指有始有终的一系列动作/消息. PHP session 变量用于存储关于用户会话(session)的信息,或者更改用户会 ...

  9. Java笔记 - 输入输出流

    java.io包中定义了各式各样的"流(stream)" 类型(类或抽象类),通过标准的方法实现对于数据的输入/输出操作. 一.流类型分类 以从不同的角度对其进行分类:按数据流的方 ...

  10. Ubuntu 安装gnome桌面及vnc远程连接

    安装gnome桌面 sudo apt-get install gnome-core 安装vnc sudo apt-get install vnc4server 启动vnc vncserver 设置一下 ...