A5下载 - 努力做内容最丰富最安全的下载站!

A5站长下载站

当前位置:A5下载 > 源码技巧 > 父类数据 > CSS3的border-image 属性实例简介

CSS3的border-image 属性实例简介

时间:2014-07-31 14:05作者:zhao人气:160

border-image可以说也是CSS3中的重量级属性,如同圆角属性border-radius、边框颜色属性border-color、块阴影属性box-shadow一样,也是属于边框属性中的一员。

现在几乎所有的现代浏览器都支持这个属性——除了IE10及以下IE版本。

看起来这是一个非常漂亮的CSS功能,它可以让你用图片修饰元素的边框。下面是一个实例演示,你可以拖拽调整里面的方块的大小,看看有什么边框图案的变化。
HTML代码如下:

<div class="bi lazy ">
<p><上面的方块使用了图片描边。在这个方块的右下角,有一个可以调整这个方块大小的小三角,点住它,拖动它调整方块大小,看看有什么效果。.</strong></p>

<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</div>

 CSS代码如下:

body {
font-family: Arial, sans-serif;
text-align: center;
}

.bi {
border: 45px solid transparent;
-webkit-border-image: url(http://images.yusi123.com/wp-contenthttps://file.a5xiazai.com/uploads/2014/07/bg-pawprints-all.jpg) 45 round;
-moz-border-image: url(http://images.yusi123.com/wp-contenthttps://file.a5xiazai.com/uploads/2014/07/bg-pawprints-all.jpg) 45 round;
border-image: url(http://images.yusi123.com/wp-contenthttps://file.a5xiazai.com/uploads/2014/07/bg-pawprints-all.jpg) 45 round;
color: #222;
width: 500px;
margin: 30px auto 30px auto;
overflow: hidden;
resize: both;
}
实列演示:

 

实列演示

 

标签CSS3的border-image 属性实例简介,CSS3

相关下载

查看所有评论+

网友评论

网友
您的评论需要经过审核才能显示

公众号