图像边框 border-image
使用方法：border-image:url('图像路径') 边距（不能带单位）/宽度 上下方式 左右方式；（四个边距，上右下左，相同时可缩写为一个）
repeat平铺 stretch拉伸  round

<style type="text/css">

		.div1{

			display: inline-block;

			margin-right: 30px;

			background: #000;

			width: 389px;

			height: 389px;

			border-style: solid;

			border-width: 100px;  /*设置边框宽度之前要先设置边框样式，不然不会显示的，这是在content外添加空间*/

			border-image:url("images/3.jpg") 100 repeat;

		}

		.div2{

			display: inline-block;

			background: darkred;

			width: 389px;

			height: 389px;

			/*直接在border-image中设置border宽度,这样实际上是占用了content的区域空间*/

			border-image:url("images/3.jpg") 100/100px repeat;

		}

	</style>

</head>

<body>

<div class="div1">CSS3新增的background-clip属性</div>

<div class="div2">CSS3新增的background-clip属性</div>

</body>

border-image用法详解的更多相关文章

  1. window.onload用法详解:

    网页中的javaScript脚本代码往往需要在文档加载完成后才能够去执行,否则可能导致无法获取对象的情况,为了避免这种情况的发生,可以使用以下两种方式: 一.将脚本代码放在网页的底端,这样在运行脚本代 ...

  2. Extjs Window用法详解 3 打印具体应用，是否关掉打印预览的界面

    Extjs Window用法详解 3 打印具体应用,是否关掉打印预览的界面   Extjs 中的按钮元素 {xtype: 'buttongroup',title: '打印',items: [me.ts ...

  3. C#中string.format用法详解

    C#中string.format用法详解 本文实例总结了C#中string.format用法.分享给大家供大家参考.具体分析如下: String.Format 方法的几种定义: String.Form ...

  4. @RequestMapping 用法详解之地址映射

    @RequestMapping 用法详解之地址映射 引言: 前段时间项目中用到了RESTful模式来开发程序,但是当用POST.PUT模式提交数据时,发现服务器端接受不到提交的数据(服务器端参数绑定没 ...

  5. linux管道命令grep命令参数及用法详解---附使用案例|grep

    功能说明:查找文件里符合条件的字符串. 语 法:grep [-abcEFGhHilLnqrsvVwxy][-A<显示列数>][-B<显示列数>][-C<显示列数>] ...

  6. mysql中event的用法详解

    一.基本概念mysql5.1版本开始引进event概念.event既“时间触发器”,与triggers的事件触发不同,event类似与linux crontab计划任务,用于时间触发.通过单独或调用存 ...

  7. CSS中伪类及伪元素用法详解

    CSS中伪类及伪元素用法详解   伪类的分类及作用: 注:该表引自W3School教程 伪元素的分类及作用: 接下来让博主通过一些生动的实例(之前的作业或小作品)来说明几种常用伪类的用法和效果,其他的 ...

  8. c++中vector的用法详解

    c++中vector的用法详解 vector(向量): C++中的一种数据结构,确切的说是一个类.它相当于一个动态的数组,当程序员无法知道自己需要的数组的规模多大时,用其来解决问题可以达到最大节约空间 ...

  9. AngularJS select中ngOptions用法详解

    AngularJS select中ngOptions用法详解   一.用法 ngOption针对不同类型的数据源有不同的用法,主要体现在数组和对象上. 数组: label for value in a ...

  10. systemctl命令用法详解

    systemctl命令用法详解系统环境:Fedora 16binpath:/bin/systemctlpackage:systemd-units systemctl enable httpd.serv ...

随机推荐

  1. Java8函数式接口以及lambda表达式实践

    罗列一下遇到可以转换成lamada表达式的场景,仅供参考,如有更好的方式,欢迎在评论区留言. 1.计算订单总金额 订单总金额一般是在后台循环叠加每个购买商品的金额已获取到,通常的方式如下 BigDec ...

  2. DataGridView显示数据库内容及更新内容到数据库

    1:类Access,包含读取数据库,更新数据库方法: class Access    {        private OleDbConnection OleCon = null;//连接数据库    ...

  3. 使用JPA中@Query 注解实现update 操作

    spring使用jpa进行update操作主要有两种方式: 1.调用保存实体的方法 1)保存一个实体:repository.save(T entity) 2)保存多个实体:repository.sav ...

  4. Flume（一）Flume原理解析

    前言 最近有一点浮躁,遇到了很多不该发生在我身上的事情.没有,忘掉这些.好好的学习,才是正道! 一.Flume简介 flume 作为 cloudera 开发的实时日志收集系统,受到了业界的认可与广泛应 ...

  5. 天气类App原型制作分享-ColorfulClouds

    ColorfulClouds是一款界面精美的天气预报App,它可以准确预报降雨量.污染程度等.这款App最美的是它的首页天气插画,扁平精美,同时配上了适当的动效,把普通的天气变得漂亮有趣,十分吸引眼球 ...

  6. js面向对象学习笔记（四）：对象的混合写法

    //对象的混合写法//1.构造函数function 构造函数() { this.属性}构造函数.原型.方法 = function () {};//调用var 对象1 = new 构造函数();对象1. ...

  7. BZOJ 1088: [SCOI2005]扫雷Mine【思维题，神奇的模拟+枚举】

    1088: [SCOI2005]扫雷Mine Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 3791  Solved: 2234[Submit][St ...

  8. Linux 文件操作命令-Linux基础环境命令学习笔记

    1.文件目录操作 1)路径识别 a.绝对路径,以根目录开始 b.相对路径,以当前目录开始,不需从根目录开始写起 2)命令 man ls 查看ls命令帮助 cd /var/log 切换进入log目录(. ...

  9. css实现视差滚动效果

    今天逛京东金融的时候发现他家网站首页的滚动效果看着很有意思,于是就做了一个,demo链接http://1.liwenyang.applinzi.com/index.html 大多数的视差滚动效果都是使 ...

  10. Dev中GridControl的GridView 基本样式设置

    基本样式图: 代码如下: /// <summary> /// gridView样式 /// </summary> /// <param name="gdv&qu ...