1.设置在元素围绕的border的图片,用图片代替边框

语法:
broder-image-source:图片
border-image-slice:切下的区域,数字|百分比(相对于图像的高度和宽度)
border-image-width:在round情况下设置repeat图片的宽度
border-image-repeat:stretch|round|repeat|space
border-image-outset:
border-image有三个要求

1.使用在border上,元素上必须有border属性
  2.切下图片像素slice
  3.定义中间的区域是重复拉伸还是直接拉伸

简写:
border-image:url("source") 30 round;
简写只能写图片地址,slice区域,和repeat方式,border-image-width须单独写,否则无法显示 JavaScript syntax: object.style.borderImageSlice="30%"

浏览器支持

原图片

1.stretch拉伸,slice是30,根据单个小方块来计算

2.round重复小方块平铺,slice是30,根据单个小方块来计算

3.repeat重复平铺,slice是30,根据单个小方块来计算

4.slice值是百分比,相对于图像的高度和宽度

5.border-image-width:在round情况下设置repeat图片的宽度

1.border-image的更多相关文章

  1. 理解CSS边框border

    前面的话   边框是CSS盒模型属性中默默无闻的一个普通属性,CSS3的到来,但得边框属性重新焕发了光彩.本文将详细介绍CSS边框 基础样式   边框是一条以空格分隔的集合样式,包括边框粗细(边框宽度 ...

  2. css样式之border

    border用法详解: 1.border-width 属性设置边框的宽度 可能的值:像素 2.border-style 属性设置边框的样式 可能的值:solid(直线),dashed(虚线),dott ...

  3. 通过CSS的border绘制三角形

    通过css的border 可以绘制出三角形, 不同的样式组合,有着不同的效果,可以控制它的大小,颜色,方向.看下面各种图形,相信可能还有很多图形,大家都没见过. 先写出公共的样式: .border { ...

  4. css3学习--border

    http://blog.sina.com.cn/s/blog_61671b520101gelr.html border-radius border-radius: 50px 20px;上下都是50px ...

  5. border:none 和border:0区别差异

    border:none与border:0的区别体现为两点:一是理论上的性能差异,二是浏览器兼容性的差异. 性能差异: [border:0;]把border设为“0”像素效果等于border-width ...

  6. WPF 通过Border来画边框

    WPF有自己的表格控件DataGrid.ListBox等,如果只是简单的需求,可以通过Border控件来画边框. 比如我们需要给上面的控件加上边框. <Window x:Class=" ...

  7. css border属性做小三角标

    <!doctype html><html> <head> <title></title> <meta charset="ut ...

  8. 使用border做三角形

    网站上经常会使用一些三角形,除了图片的方式,实际上利用border我们可以做出纯CSS的三角形.我们知道border是个边抖可以单独设置,当四个边相交的时候他们是什么时候改变的? .t0{ margi ...

  9. iPhone 6/plus iOS Safari fieldset border 边框消失

    问题:iPhone6 plus 手机浏览网页,fieldset border 边框消失. 示例代码: <div> <fieldset style="border: 1px ...

  10. 原来css中的border还可以这样玩

    原来css中的border还可以这样玩 前面的话: 在看这篇文章之前你可能会觉得border只是简单的绘制边框,看了这篇文章,我相信你也会跟我一样说一句"我靠,原来css中的border还可 ...

随机推荐

  1. Phalcon的MVC框架解析

    1. mvc/simple从最简单的入手吧. 把一些能及时说明白的东西写在注释里了,需要扩展的知识列在下面. public/index.php <?php $loader = new \Phal ...

  2. lvm 新建一个vg 逻辑卷 配置启动

    fdisk /dev/sdb 格式 t  8e w vgcreate datavg /dev/sdb1lvcreate -L 999G -n lvdata datavgmkfs.xfs /dev/da ...

  3. Linq中的ToList()和CopyToDataTable()

    最近在项目中使用了Linq,想把Linq的查询结果直接转换成DataTable对象,通过查找发现Linq有一个CopyToDataTable<T>的泛型方法,该方法只能在T是DataRow ...

  4. Hibernate- 连接查询

    01.搭建开发环境 02.连接查询 package com.gordon.test; import java.util.Arrays; import java.util.List; import or ...

  5. 命令行启动kettle

    kettle命令启动: http://download.csdn.net/detail/ludaxin6/9519418 kettle命令启动参数: http://blog.csdn.net/glei ...

  6. [从jQuery看JavaScript]-注释(comments)

    jQuery片段: /*! * jQuery JavaScript Library v1.3.2 * http://jquery.com/ * * Copyright (c) 2009 John Re ...

  7. [oracle] 重要服务启动与停止命令行

    ① 控制台服务[em control] 启动:emctl start dbconsole 停止:emctl stop dbconsole ② 监听器服务[listener control] 启动:ls ...

  8. Java运行时,各种类型存储介绍

    Java的内存分配   Java程序运行时的内存结构分成:方法区.栈内存.堆内存.本地方法栈几种.    方法区    存放装载的类数据信息,包括:基本信息:每个类的全限定名.每个类的直接超类的全限定 ...

  9. linux -- ubuntu 14.10开机出现错误“Error found when loading /root/.profile”解决

    修改完root权限自动登录后,发现开机出现以下提示: Error found when loading /root/.profile stdin:is not a tty ………… 解决方法:在终端中 ...

  10. Python脚本完美解决Linux环境解压.zip文件乱码问题

    1.vi uzip(文件名)2.复制以下Python程序 #!/usr/bin/env python # -*- coding: utf-8 -*- # uzip.py import os impor ...