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. mapper.xml实现oracle的分页语句

    当我们用常规方法进行分页查询时,虽然在数据库可以分页查询出来数据, 如下语句 <!-- 分页查询所有 --> <select id="findAllPage" r ...

  2. C++实现单链表的12种基本操作

    C++单链表的操作2017-12-25 1 // 单链表.cpp: 定义控制台应用程序的入口点. //Author:kgvito //Date: 2017.12.25 #include "s ...

  3. Erlang/Elixir精选-第5期(20200106)

    The forgotten ideas in computer science-Joe Armestrong 在2020年的第一期里面,一起回顾2018年Joe的 The forgotten idea ...

  4. Bug 佛祖镇楼

    原文链接:https://www.cnblogs.com/xdp-gacl/p/4198935.html // _ooOoo_ // o8888888o // 88" . "88 ...

  5. 八十三、SAP中的ALV创建之二，ALV相关的类型池定义

    一.与ALV相关的类型都是在TYPE-POOLS:SLIS中.我们来到SE11 二.常用的定义有fieldca和layout等,用于显示字段,和控制信息数据等. 三.我们以VBAK表为例,用ALV输出 ...

  6. 091-PHP数组过滤函数array_filter，过滤非整数

    <?php function not_int($x){ //定义过滤非整数的函数 if(is_int($x)) return TRUE; } $arr=array(1,2,'a',3,4,'c' ...

  7. JAVA - SpringBoot项目引用generator生成 Mybatis文件

    JAVA - SpringBoot项目引用generator生成 Mybatis文件  在spring官网https://start.spring.io/自动生成springboot项目,这里选择项目 ...

  8. Spark 调优

    资源调优 (1). 在部署 spark 集群中指定资源分配的默认参数 在 spark 安装包的 conf 下的 spark-env.sh SPARK_WORKER_CORES SPARK_WORKER ...

  9. 14 SQLite数据库

    SQLite数据库SQLite 是一款轻型的数据库SQLite 的设计目标是嵌入式的SQLite 占用资源低SQL 指结构化查询语言SQL 使我们有能力访问数据库SQL 是一种 ANSI 的标准计算机 ...

  10. abstract和interface关键字介绍

    一.abstract关键字介绍 abstract可以修饰方法.类.使用abstract修饰的方法和类分别叫做抽象方法和抽象类. 1.抽象方法 抽象方法的定义:指可以通过abstract关键字声明的方法 ...