css3 描两个边,CSS3 / 指定四条边中图像的显示方法

绘制四个角不同半径的圆角边框

可以在border-image属性中指定元素四条边中的图像是以拉伸的方式显示，还是以平铺的方式显示，指定方法如下所示。

border-image: url(文件路径) A B C D/border-width topbottom leftright

其中,topbottom表示元素的上下两条边中图像的显示方法，leftright表示元素的左右两条边中的显示方法。在显示方法中可以指定的值为repeat、stretch、round三种。

repeat

将显示方法指定为repeat时，图像将以平铺的方式进行显示。示例代码：

.wrap {

border-image:url(img/border.png) 18/5px repeat repeat;

-webkit-border-image:url(img/border.png) 18/5px repeat repeat;

-moz-border-image:url(img/border.png) 18/5px repeat repeat;

}

stretch

将显示方法指定为stretch时，图像将以拉伸的方式进行显示。

repeat+stretch

将显示方法指定为repeat+stretch时，图像将以平铺方式和拉伸方式结合使用。示例如下：

.wrap {

border-image:url(img/border.png) 18/5px repeat stretch;

-webkit-border-image:url(img/border.png) 18/5px repeat stretch;

-moz-border-image:url(img/border.png) 18/5px repeat stretch;

}

round

将显示方法指定为round时与将显示指定为repeat类似。

css3 描两个边,CSS3 / 指定四条边中图像的显示方法 - 汇智网相关推荐

html圆角半径,CSS3 / 绘制四个角不同半径的圆角边框 - 汇智网
绘制四个角不同半径的圆角边框如果要绘制的圆角边框四个角半径各不相同,可以将border-top-left-radius属性.border-top-right-radius属性.border-bott ...
CSS3属性之text-overflow:ellipsis,指定多行文本中任意一行显示...
对于text-overflow:ellipsis,文本超出部分显示...,但要实现这个效果,却有一些必备条件,如下: div{overflow:hidden;white-space:nowrap;te ...
css3 两种背景色,CSS3 / 实例改变背景色和位置 - 汇智网
实例实例改变背景色和位置 @keyframes myfirst { 0% {background: red; left:0px; top:0px;} 25% {background: yellow; ...
Cadence Allegro PCB设计88问解析(十四) 之 Allegro中库路径设置方法
一个学习信号完整性的layout工程师大家在进行Layout设计时,最重要就是导入网表,放入元器件,然后进行走线.那其中的元器件就是今天和大家分享的一点,不管是阻容感,还是各种IC.连接器都是有封装 ...
iOS开发笔记之二十四——Xcode下类中供外部调用的方法添加注释说明技巧
1.使用介绍使用该方式后,一个类再调用其他类的外部方法时,可以不用点进去看这个类的用法等说明,可以直接在外部看到,很方便,类似于iOS系统Cocoa自带方法. 举例如下: 一个VideoChatC ...
CSS3与页面布局学习笔记（四）——页面布局大全(负边距、双飞翼、多栏、弹性、流式、瀑布流、响应式布局)
一.负边距与浮动布局 1.1.负边距所谓的负边距就是margin取负值的情况,如margin:-100px,margin:-100%.当一个元素与另一个元素margin取负值时将拉近距离.常见的功能 ...
CSS3与页面布局学习总结（四）——页面布局大全BFC、定位、浮动、7种垂直居中方法...
目录一.BFC与IFC 1.1.BFC与IFC概要 1.2.如何产生BFC 1.3.BFC的作用与特点二.定位 2.2.relative 2.3.absolute 2.4.fixed 2.5.z- ...
html渐变设置颜色比例,css3 渐变两个颜色各占百分之五十怎么设置
css3 渐变两个颜色各占百分之五十怎么设置 css代码#D72727和#ffffff为颜色(其中,left代表颜色过渡方向,比如设置为bottom就会变成上下过渡,末尾的百分比为颜色的偏移量,也就 ...
CSS3 经典教程系列：CSS3 圆角（border-radius）详解
<CSS3 入门教程系列>前一篇文章详细介绍了 CSS3 RGBA 特性的用法,今天这篇文章我们在一起来看看 CSS3 中用于实现圆角效果的 border-radius 属性的具体用法. ...

css3 描两个边,CSS3 / 指定四条边中图像的显示方法 - 汇智网

css3 描两个边,CSS3 / 指定四条边中图像的显示方法 - 汇智网相关推荐

最新文章

热门文章