border-image语法:

  border-image : none | <image> [ <number> | <percentage>]{1,4} [ / <border-width>{1,4} ]? [ stretch | repeat | round ]{0,2}

  第一个参数:none:默认值,边框无背景图片

        image:和background-image一样,根据绝对定位设置背景图片的位置

  第二个参数:

        number:设置边框的宽度,单位px,可以使用1~4个值,指定边框的宽度,设置方式同border-width

        percentage:同number一样,只不过是使用百分比来设置宽度

  第三个参数:(可选,1~4个,分别制定上右下左的的图片铺设方式)

        stretch,repeat,round:他们是用来设置边框背景图片的铺放方式,类似于background-position。

        其中stretch是拉伸,repeat是重复,round是平铺,stretch为默认值。

        

css3整理--border-image的更多相关文章

  1. css3整理-方便查询使用

    最近详细地研究了CSS3的相关内容,并整理了这个文档,方便以后查询使用,分享给大家. 案例代码大家可以下载参考下:https://gitee.com/LIULIULIU8/CSS3 1.边框属性bor ...

  2. css3学习--border

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

  3. css3整理--box-sizing

    box-sizing语法: box-sizing : content-box || border-box || inherit 参数取值: content-box:此值为其默认值,其让元素维持W3C的 ...

  4. css3整理--background-origin

    background-origin语法: background-origin: padding-box || border-box || content-box 参数取值: padding-box(p ...

  5. css3整理--background-clip

    background-clip语法: background-clip : border-box || padding-box || content-box 参数取值: border-box:此值为默认 ...

  6. css3实现border渐变色

    案例1 .box{ width: 100px; height: 100px; border:10px solid #ddd; border-image: -webkit-linear-gradient ...

  7. css3整理--filter

    只在chrome的少数版本的浏览器中有实现,兼容性差,不适宜应用. filter语法: elm { filter: none | <filter-function > [ <filt ...

  8. css3整理--clip

    clip语法: .selector { clip: rect | auto | inherit } 注意:clip属性只能在元素设置了“position:absolute”或者“position:fi ...

  9. css3整理--::selection

    ::selection作用: 当使用鼠标选择文本时,改版被选中文本的背景色和前景色.(默认情况下,window中背景色是深蓝色,前景色是白色.) ::selection语法: /*Mozilla Fi ...

  10. css3整理--calc()

    calc()语法: elem{ width:calc( 50% -2px ); } 取值说明: calc是计算的缩写,上句含义是:计算elem父元素的50%再减2px,并将结果赋值给elem的widt ...

随机推荐

  1. Qt SDK的x64与x86版本号以及与VS的配合

    今天遇到一个奇怪的问题.我用Qt的64位版本号,动态载入一个SDK的dll,不管怎样都是载入失败.QLibrary也没什么有价值的信息. 实在没辙,就用VS2013写了个小程序,用LoadLibrar ...

  2. table中td的内容换行。

    table设置样式: table-layout: fixed; td设置: word-wrap: break-word;

  3. NHibernate 基础教程

    NHibernate之旅系列文章导航 宣传语 NHibernate.NHibernate教程.NHibernate入门.NHibernate下载.NHibernate教程中文版.NHibernate实 ...

  4. cocos2d - Changing the image of a CCSprite

    CCTexture2D* tex = [[CCTextureCache sharedTextureCache] addImage:@"new_image_name"]; [spri ...

  5. PHP和Apache结合 Apache默认虚拟主机

  6. 微信小程序/支付宝小程序 WxParse解析富文本(html)代码

    小程序本身并不太支持html代码,比如html的img.span.p这个时候改这么办呢?需要用到一个小插件WxParse来实现. 小程序高级交流群:336925436  微信小程序支持富文本编辑器代码 ...

  7. Oracle统计每条数据的大小

    怎么查询一条记录到底占了多少空间呢,随便用一个表举例(如上图),就着解决眼前问题的原则(oracle),网上简单查了查,发现生效了,就没深入了解了,包括其它数据库怎么解决,都没做研究.Oracle下, ...

  8. V8学习资源

    http://wenku.baidu.com/link?url=7mk6ib9IJ-1K_-bFVZ-fXXo2nbI3jOJ3cnhr3XC3b08fPOKkc9v8vSAd-DgNMJZ2vdjg ...

  9. 关于android 内存的笔记

    原文 https://developer.android.com/training/articles/memory.html 1.慎重使用Service,最好的办法是使用IntentService,一 ...

  10. Android开发学习笔记-实现联网检测程序版本

    package com.frank.mobilesafe; import java.io.InputStream; import java.net.HttpURLConnection; import ...