css3 border-image使用说明

作者：佚名字体：[增加减小] 来源：互联网时间：2017-06-02

本文主要包含css3怎么使用,如何使用css3,css3使用手册,简要说明css3的用途,css3等相关知识,佚名希望在学习及工作中可以帮助到您

在看这个属性时，好像国内的文章都没给大家说太明白，今天就一起说说推荐大家看下这篇文章 http://www.weikejianghu.com/css/38358.html

首先来一个素材图片whiteButton.png

然后我们要做成这样的效果：

代码（呵呵！请不要急，继续向下看）：

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

none：

默认值。无背景图。

<image>：

使用绝对或相对 url 地址指定背景图像。

<number>：

边框宽度用固定像素值表示。

<percentage>：

边框宽度用百分比表示。

[ stretch | repeat | round ]：

拉伸 | 重复 | 平铺 (其中stretch是默认值。)

请看下图平剖析一下css代码

也就是：

他们把图片，用#的方式截取，然后用 stretch | repeat | round 来控制水平或垂直的效果。看看下图你就明白了

当然关于边框的宽度你也可以用%;其原理也是一样：

到这大家应该弄明白border-image是怎么一回事了吧。

给大家一些例子练习

圆角

border-width: 10px;

</div>

border-image: url("media/roundedCorner.png") 20;

</div>

border-width: 20px;

</div>

border-image: url("media/border.png") 20;

</div>

Drop shadow

border-width: 10px;

</div>

border-image: url("media/blackShadow.png") 5;

</div>

Tab

border-width: 15px 20px 0;

</div>

border-image: url("media/tab.png") 20 20 0;

</div>

border-width: 10px 10px 0;

</div>

border-image: url("media/gradient.png") 10 10 0;

</div>

多个按钮

But not impossible.

</div>

This one is tricky.

</div>

参考文档：www.lrbabe.com/sdoms/borderImage/

ejohn.org/blog/border-image-in-firefox/

</div>

您可能想查找下面的文章:

2017-06-02css3 按钮样式简单可扩展创建
2017-06-02IE下实现类似CSS3 text-shadow文字阴影的几种方法
2017-06-02全方位了解CSS3的Regions扩展
2017-06-02CSS3 Flexbox中flex-shrink属性的用法示例介绍
2017-06-02使用HTML5和CSS3表单验证功能
2017-06-02实例教程一款纯css3实现的数字统计游戏
2017-06-02css3学习之2D转换功能详解
2017-06-02CSS3的Flexbox布局的简明入门指南
2017-06-02CSS3制作漂亮的照片墙的实现代码
2017-06-02简单掌握CSS3中resize属性的用法

css3 border-image使用说明

圆角

Drop shadow

Tab

多个按钮

您可能想查找下面的文章:

相关文章

文章分类

最近更新的内容