图像边框 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. MySQL innodb_table_monitor 解析

    背景:       用innodb_table_monitor来查看表内部的存储信息和索引结构是一个好的办法.再之前的MySQL 字符串主键和整型主键分析中提到了一些内容,但没有细讲,现在来好好的分析 ...

  2. 五分钟学习React(四)：什么是JSX

    JSX,即javscript XML,是js内定义的一套XML语法.目前是使用babel作为JSX的编译器.这也是在前几期中载入babel的原因. Facebook引入JSX是为了解决前端代码工程复杂 ...

  3. [搬运]在C#使用.NET设计模式的新观点

    原文地址:http://www.dotnetcurry.com/dotnet/1092/dotnet-design-patterns 软件开发有许多设计模式.其中一些模式非常受欢迎.说几乎所有的模式都 ...

  4. zookeeper伪分布式集群环境搭建

    step1.下载 下载地址:http://zookeeper.apache.org/releases.html 将下载的压缩包放到用户家目录下(其他目录也可以) step2.解压 $tar –zxvf ...

  5. deeplearning.ai 人工智能行业大师访谈 Pieter Abbeel 听课笔记

    1. Pieter Abbeel小时候想做一个篮球运动员 - -!上学的时候喜欢数学和物理,上大学之后很自然的学工程.Pieter定义工程问题是"解决实际中应用物理和数学的问题". ...

  6. 【Java学习笔记之十一】Java中常用的8大排序算法详解总结

    分类: 1)插入排序(直接插入排序.希尔排序) 2)交换排序(冒泡排序.快速排序) 3)选择排序(直接选择排序.堆排序) 4)归并排序 5)分配排序(基数排序) 所需辅助空间最多:归并排序 所需辅助空 ...

  7. HDU 1874 畅通工程续【Floyd算法实现】

    畅通工程续 Time Limit: 3000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submi ...

  8. Linux下采用VI编辑器删除复制或移动多行文本内容

    一.删除多行 单行删除,:1(待删除行号)d 多行删除,:1,10d dd 删除光标所在行ndd删除以当前行开始的n行dw删除以当前字符开始的一个字符ndw删除以当前字符开始的n个字符d$.D删除以当 ...

  9. Video Target Tracking Based on Online Learning—深度学习在目标跟踪中的应用

    摘要 近年来,深度学习方法在物体跟踪领域有不少成功应用,并逐渐在性能上超越传统方法.本文先对现有基于深度学习的目标跟踪算法进行了分类梳理,后续会分篇对各个算法进行详细描述. 看上方给出的3张图片,它们 ...

  10. React Native学习（七）—— FlatList实现横向滑动列表效果

    本文基于React Native 0.52 Demo上传到Git了,有需要可以看看,写了新内容会上传的.Git地址 https://github.com/gingerJY/React-Native-D ...