一、定义:

  • 在内容变化的容器里使用,边框自动填充,由于浏览器的兼容问题,没有广泛使用
  • border-image属性是速记属性用于设置 border-image-source, border-image-slice, border-image-width, border-image-outset 和border-image-repeat 的值。例如:border-image:url(“1.png”) 167/20px round

二、用法

①border-image-source属性指定要使用的图像,而不是由border-style属性设置的边框样式。 如果值是"none",或者,如果无法显示图像,边框样式会被使用。

②border-image -slice属性指定图像的边界向内偏移。此属性指定顶部,右,底部,左边缘的图像向内偏移,分为九个区域:四个角,四边和中间。值默认的单位是px,不能使用小数

③border-image -width属性指定图像边界的宽度。

④border-image-outset用于指定在边框外部绘制 border-image-area 的量,设置边框图像与边框(border-image)的距离,默认为0

⑤ border-image-repeat 属性用于图像边界是否应重复(repeated:从边框的中间向两侧平铺,但不完整)、拉伸(stretched:拉伸显示在边框内,会变形)或铺满(rounded:完整的自适应显示在边框内,等比缩放,不会变形)。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>边框图片</title>
<style>
.box1{
width: 400px;
height: 400px;
float: left;
border: 20px solid #000;/* 必须先设置 */
border-image: url("border.png") 26/20px stretch;
}
.box2{
width: 400px;
height: 400px;
float: left;
border: 20px solid #000;/* 必须先设置 */
border-image: url("border.png") 26/20px round;
}
.box3{
width: 400px;
height: 400px;
float: left;
border: 20px solid #000;/* 必须先设置 */
border-image: url("border.png") 26/20px repeat;
}
</style>
</head>
<body>
<div class="box1">stretch(默认值)</div>
<div class="box2">round</div>
<div class="box3">repeat</div>
</body>
</html>

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

  1. css3 border img 边框图片

    摘自http://www.html-js.com/article/CSS3-tutorial-css3borderimage-frame-image-Xiangjie-on border-image摘 ...

  2. 第 23 章 CSS3 边框图片效果

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

  3. Retina视网膜屏中CSS3边框图片像素虚边的问题

    虽然CSS3新增了这个功能,但是在W3school里面并没有给出具体详细的解释,还好网上不乏大神给你我们很全面的解释其中的原理-css3:border-image边框图像详解 边框图片的原理是四个角不 ...

  4. CSS3之边框图片border-image

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

  5. 第八十节,CSS3边框图片效果

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

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

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

  7. 从零开始学 Web 之 CSS3(四)边框图片,过渡

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

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

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

  9. CSS3边框图片-像素虚边的问题

    虽然CSS3新增了这个功能,但是在W3school里面并没有给出具体详细的解释,还好网上不乏大神给你我们很全面的解释其中的原理-css3:border-image边框图像详解 边框图片的原理是四个角不 ...

  10. CSS学习笔记-边框图片等属性

      1.边框图片:        1.1含义:            告诉浏览器指定一张图片作为边框        1.2格式:             border-image-source:url ...

随机推荐

  1. adb命令查看连接PC的移动设备

    cmd窗口中输入adb应会出现上图情况,如果显示不存在则需要网上下载adb工具并在我的电脑-属性-高级系统设置-环境变量中将adb工具的路径加入PATH,如下图: 输入adb devices 可以看到 ...

  2. Arm-Linux 移植 Nginx

    有关博客: <Windows 编译安装 nginx 服务器 + rtmp 模块>.<Ubuntu 编译安装 nginx>.<Arm-Linux 移植 Nginx> ...

  3. 单例DCL模式

    单例模式可以保证系统中一个类只有一个实例.即一个类只有一个对象实例. 一般写法 public class DCLSingle { public static DCLSingle instance= n ...

  4. Gym102028G Shortest Paths on Random Forests 生成函数、多项式Exp

    传送门 神仙题-- 考虑计算三个部分:1.\(n\)个点的森林的数量,这个是期望的分母:2.\(n\)个点的所有森林中存在最短路的点对的最短路径长度之和:3.\(n\)个点的所有路径中存在最短路的点对 ...

  5. golang ---网卡信息

    package main import ( "fmt" "log" "net" "strings" ) type Net ...

  6. 【转载】C#中通过Distinct方法对List集合进行去重

    在C#的List集合对象中,可以使用Distinct方法来对List集合元素进行去重,如果list集合内部元素为值类型,则Distinct方法根据值类型是否相等来判断去重,如果List集合内部元素为引 ...

  7. python3基础之“小练习(1)”

    (一)打印3个不同的字符 # a=int("123") # b="123" # c=1.2 # print(type(a),a) # print(type(b) ...

  8. java中将对象引用设置为null对于GC有没有帮助

    相信,网上很多java性能优化的帖子里都会有这么一条: 尽量把不使用的对象显式得置为null.这样有助于内存回收 可以明确的说,这个观点是基本错误的.sun jdk远比我们想象中的机智.完全能判断出对 ...

  9. [daily][archlinux] pacman 安装软件时404的问题

    时常,我们在archlinux上pacman安装一个软件时,会遇见如图这样的问题: “The requested URL returned error: 404”  [classic_tong @ 2 ...

  10. 分布式结构化存储系统-HBase应用案例

    分布式结构化存储系统-HBase应用案例 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 为了让读者更进一步了解HBase在实际生成环境中的应用方法,在董西成的书里介绍两个经典的HB ...