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 5495：LCS

    LCS  Accepts: 127  Submissions: 397  Time Limit: 6000/3000 MS (Java/Others)  Memory Limit: 65536/655 ...

  2. js generator的两个实际应用

    generator作为一个用来操作异步的状态机, 遇到yield停止, 通过调用next()来继续操作.  今天就用generator来举例两个实际开发中的应用. 1,抽奖 function draw ...

  3. spring boot项目mybatis配置注解+配置文件

    maven依赖 <dependency> <groupId>mysql</groupId> <artifactId>mysql-connector-ja ...

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

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

  5. Python 中 configparser 配置文件的读写及封装，配置文件存放数据，方便修改

    1. 将程序中不常变化的数据放在配置文件中,有什么好处? 将配置统一放在一起,进行统一管理,方便维护,方便修改 配置文件将存放测试数据比如: Excel文件名. 日志名. 用例执行的结果. 实际结果和 ...

  6. React 学习笔记（2） 路由和UI组件使用

    安装依赖 cnpm install react-router-dom -S // 或 yarn add react-router-dom 导入 // index.js import React fro ...

  7. 201912-1 报数 Java

    思路: String.valueOf(int i) : 将 int 变量 i 转换成字符串 String.contains()用于判断字符串是否包含子字符串 import java.util.Scan ...

  8. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 字体图标(Glyphicons)：glyphicon glyphicon-tags

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...

  9. ACM-可乐兑换

    题目描述:可乐兑换 小明的班级参加一个活动,每人要喝过一瓶可乐,恰逢可乐促销,3瓶可乐空瓶可以换一瓶可乐,小明想节约钱,所以想买尽可能少的可乐让每人至少喝过一瓶可乐,问买至少多少瓶可乐够n人至少每人喝 ...

  10. UVA - 11181 Probability|Given （条件概率）

    题意:有n个人,已知每个人买东西的概率,求在已知r个人买了东西的条件下每个人买东西的概率. 分析:二进制枚举个数为r的子集,按定义求即可. #include<cstdio> #includ ...