1.边框图片详解

     <style>

         *{

             padding:;

             margin:;

         }

         div{

             width: 900px;

             height: 900px;

             margin: 100px auto;

             border: 133px solid red;

             /*padding: 133px;*/

             /*添加边框图片*/

             /*border-image-source:可以指定边框图片的路径，默认只是填充到容器四个角*/

             /*border-image-source: url("../img/border2.jpg");*/

             /*让他成为九宫格：border-image-slice：设置四个方向的裁切距离。fill：做内容部分的填充*/

             /*border-image-slice: 133 fill;*/

             /*border-image-width:边框图片的宽度。如果没有设置这个属性，那么宽度默认就是元素的原始的边框宽度。

             细节：1.边框图片的本质是背景，并不会影响元素内容的放置  2.内容只会被容器的border和padding影响

             建议：一般将值设置为原始的边框的宽度*/

             /*border-image-width: 133px;*/

             /*border-image-outset:扩展边框---一般不会用*/

             /*border-image-outset: 0px;*/

             /*border-image-repeat:

             repeat:直接重复平铺

             round：将内容缩放进行完整的重复平铺*/

             /*border-image-repeat: round;*/

             /*缩写*/

             /*border-image: source  slice  / width / outset  repeat;*/

             border-image: url("../img/border2.jpg") 133 / 133px / 0px round;

         }

     </style>

2.边框图片小案例

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <style>

         *{

             padding: 0;

             margin: 0;

         }

         div{

             width: 1200px;

             height: auto;

             border: 20px solid red;

             border-image-source: url("../img/border3.jpg");

             border-image-slice: 20 fill;

             border-image-width: 20px;

             border-image-repeat: stretch;

         }

     </style>

 </head>

 <body>

 <div>边框图片的四个角是不会拉伸的，不管盒子的大小，宽高如何变化，背景图片都都会填充满整个盒子。切四个角不会变化

     边框图片的四个角是不会拉伸的，不管盒子的大小，宽高如何变化，背景图片都都会填充满整个盒子。切四个角不会变化

     边框图片的四个角是不会拉伸的，不管盒子的大小，宽高如何变化，背景图片都都会填充满整个盒子。切四个角不会变化

     边框图片的四个角是不会拉伸的，不管盒子的大小，宽高如何变化，背景图片都都会填充满整个盒子。切四个角不会变化

     边框图片的四个角是不会拉伸的，不管盒子的大小，宽高如何变化，背景图片都都会填充满整个盒子。切四个角不会变化

     边框图片的四个角是不会拉伸的，不管盒子的大小，宽高如何变化，背景图片都都会填充满整个盒子。切四个角不会变化

     边框图片的四个角是不会拉伸的，不管盒子的大小，宽高如何变化，背景图片都都会填充满整个盒子。切四个角不会变化

     边框图片的四个角是不会拉伸的，不管盒子的大小，宽高如何变化，背景图片都都会填充满整个盒子。切四个角不会变化

     边框图片的四个角是不会拉伸的，不管盒子的大小，宽高如何变化，背景图片都都会填充满整个盒子。切四个角不会变化</div>

 </body>

 </html>

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

  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. 基于h5的图片无刷新上传(uploadifive)

    基于h5的图片无刷新上传(uploadifive) uploadifive简介 了解uploadify之前,首先了解来一下什么是uploadify,uploadfy官网,uploadify和uploa ...

  5. CSS3之边框图片border-image

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

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

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

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

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

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

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

  9. h5的图片预览

    h5的图片预览是个好东西,不需要保存到后台就能预览图片 代码也很短 <!DOCTYPE html> <html> <head> <meta charset=& ...

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

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

随机推荐

  1. HDU - 3729 I'm Telling the Truth（二分匹配）

    题意:有n个人,每个人给出自己的名次区间,问最多有多少个人没撒谎,如果有多解,输出字典序最大的解. 分析: 1.因为字典序最大,所以从后往前分析. 2.假设后面的人没说谎,并将此作为已知条件,然后从后 ...

  2. C++ 检测物理内存以及磁盘空间

    BOOL CheckResource() { MEMORYSTATUSEX statex; statex.dwLength = sizeof (statex); GlobalMemoryStatusE ...

  3. usb摄像头驱动的移植

    相关软件下载地址:http://pan.baidu.com/s/16yo8Y 1.使用摄像头型号ov9650 ①修改.配置内核 1.修改vi drivers/i2c/busses/Kconfig (参 ...

  4. Linux 文件夹和文件大小排序

    Linux 文件夹和文件大小排序 文件夹排序 du -k | sort -rn 文件排序 ls -lS -r, –reverse 依相反次序排列 -R, –recursive 同时列出所有子目录层 - ...

  5. excel提取数字

    部分提取,那么就用=-LOOKUP(,-MID(A1,MIN(FIND({0;1;2;3;4;5;6;7;8;9},A1&1234567890)),ROW($1:$1024))) ------ ...

  6. 一次C语言编程遇到的问题总结

    今天用C语言做了一个简单的用户登录注册存取款等功能的系统,发现有很多功能并不会实现,大概是使用Java太多了导致许多C的知识都忘记了,现在把碰到的问题总结如下: 1.字符串复制问题 java等一些编程 ...

  7. 072-PHP数组的交集和差集

    <?php $arr1=array(1,3,4,5,34,78,99); //参加第一项竞赛的学生学号数组 $arr2=array(5,6,7,3,56,34,8,9); //参加第二项竞赛的学 ...

  8. POJ 1770 树形DP

    咋一看确实想到的是树形DP,但是我一开始也马上想到环的情况,这样应该是不可以进行树形DP的,然后我自以为是地想用有向图代替无向图,而且总是从能量高的指向能量低的,这样自以为消除了环,但是其实是不对滴, ...

  9. 查看mysql表空间

    ,),'MB') as data_size, concat(,),'MB') as index_size from information_schema.tables group by TABLE_S ...

  10. Egret Engine 2D - Get Started

    Get Started     Egret 也支持在命令行完成编译,运行,发布等操作.在下面的教程中会穿插对应操作的命令行代码.   可新建游戏项目,也可建eui项目   这里包含默认的几个库,egr ...