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. CodeForces - 755C PolandBall and Forest （并查集）

    题意:给定n个数,Ai的下标为1~n.对于每一个i,Ai与i在同一个树上,且是与i最远的点中id最小的点(这个条件变相的说明i与Ai连通).求森林中树的个数. 分析:若i与Ai连通,则在同一个树上,因 ...

  2. Python自学之路

    2020年春节,受新型冠状病毒影响,整个春节假期,全国人民都在恐慌之中,为了避免大家上班相互传染,公司号召国家政策,开始上班日期延迟,在家呆的实在太无聊,突然感觉自己不能浪费这美好的时光,决定学习Py ...

  3. 如何将sql文件导入数据库

    打开navicat.exe,点击打开数据库,右键-运行SQL文件,选中要运行的sql文件,确定后再点击表即可. 注意:此次改变后,源sql文件可以转移路径

  4. Arduino函数

    输入输出函数 pinMode(pin, mode)将数位脚位(digital pin)指定为输入或输出.如:pinMode(7,INPUT); // 将脚位 7 设定为输入模式 digitalWrit ...

  5. 七十、SAP中内表批量指定位置插入

    一.代码如下 二.调试一下 三.被插入的数据 四.效果如下

  6. hdu1222Wolf and Rabbit （公约数的巧题）

    一个很坑的问题,想到点子上很好解决,想不到的话头破也不一定能做出来. There is a hill with n holes around. The holes are signed from 0 ...

  7. UVA - 1213 Sum of Different Primes （不同素数之和）（dp）

    题意:选择k个质数,使它们的和等于n,问有多少种方案. 分析:dp[i][j],选择j个质数,使它们的和等于i的方法数. #pragma comment(linker, "/STACK:10 ...

  8. JavaSE--日志

    参考 https://www.cnblogs.com/hanszhao/p/9754419.html https://www.cnblogs.com/chenhongliang/p/5312517.h ...

  9. leetcode股票问题方法收集 转载自微信公众号labuladong

    一.穷举框架首先,还是一样的思路:如何穷举?这里的穷举思路和上篇文章递归的思想不太一样. 递归其实是符合我们思考的逻辑的,一步步推进,遇到无法解决的就丢给递归,一不小心就做出来了,可读性还很好.缺点就 ...

  10. SpringBoot基于easyexcel导出和写入Excel

      easyexcel是阿里巴巴旗下开源项目,主要用于Excel文件的导入和导出处理,今天我们利用SpringBoot和easyexcel实战演示如何导出和写入Excel文件. 一.加入我们需要的ea ...