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. 指令——cp

    一个完整的指令的标准格式: Linux通用的格式——#指令主体(空格) [选项](空格) [操作对象] 一个指令可以包含多个选项,操作对象也可以是多个. 指令:cp (copy,复制) 作用:复制文件 ...

  2. Java8集合框架——LinkedHashSet源码分析

    本文的目录结构如下: 一.LinkedHashSet 的 Javadoc 文档注释和简要说明 二.LinkedHashSet 的内部实现:构造函数 三.LinkedHashSet 的 add 操作和 ...

  3. 基于云开发开发 Web 应用（三）：云开发相关数据调用

    介绍 在完成了 UI 界面的实现后,接下来可以开始进行和云开发相关的数据对接.完成数据对接后,应用基础就打好了,接下来的就是发布上线以及一些小的 feature 的加入. 配置 在进行相关的配置调用的 ...

  4. 二、【未来】React环境安装：npx

    搭建React的开发环境的第二种方法(新-未来推荐): https://reactjs.org/docs/create-a-new-react-app.html 一. npx简介: 1. npm v5 ...

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

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

  6. POJ 3311 Hie with the Pie 最短路+状压DP

    Hie with the Pie Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 11243   Accepted: 5963 ...

  7. 苏州大学ICPC集训队新生赛第二场

    A - Score UVA - 1585 水 #include<bits/stdc++.h> using namespace std; int main(){ int n; cin> ...

  8. javascript如何获取复选框中的值？

    思路:获取checkbox对象→循环checkbox数组,根据checked属性判断是否选中→使用value属性获取选中项的值.实例演示如下: 1.HTML结构 <form> <in ...

  9. 【LeetCode】克隆图

    [问题]给定无向连通图中一个节点的引用,返回该图的深拷贝(克隆).图中的每个节点都包含它的值 val(Int) 和其邻居的列表(list[Node]). 解释: 节点 的值是 ,它有两个邻居:节点 和 ...

  10. 并发 ping

    参考 [root@RS2 ~]# cat .sh #!/bin/bash # --, by wwy #------------------------------------------------- ...