查看: 1994|回复: 14

[趣味课堂] CSS3 border-image 属性


17-3-27 09:53:59 | [复制链接]

3446

主题

2810

帖子

84万

积分

荣誉会员

Rank: 8Rank: 8

最佳新人活跃会员热心会员灌水之王突出贡献社区QQ达人

发表于 17-3-27 09:23:52 | 显示全部楼层 |阅读模式
CSS3 border-image 属性



例子:
将图片规定为包围 div 元素的边框:
  1. <b><font color="#000000">div
  2. {
  3. -webkit-border-image:url(border.png) 30 30 round; /* Safari 5 */
  4. -o-border-image:url(border.png) 30 30 round; /* Opera */
  5. border-image:url(border.png) 30 30 round;
  6. }</font></b>
复制代码

结果:
1.png


点击测试


浏览器支持
Internet Explorer 11, Firefox, Opera 15, Chrome 以及 Safari 6 支持 border-image 属性。
Safari 5 支持替代的 -webkit-border-image 属性。


定义和用法
border-image 属性是一个简写属性,用于设置以下属性:
border-image-source
border-image-slice
border-image-width
border-image-outset
border-image-repeat
如果省略值,会设置其默认值。


提示:请使用 border-image-* 属性来构造漂亮的可伸缩按钮!
默认值: none 100% 1 0 stretch
继承性: no
版本: CSS3
JavaScript 语法: object.style.borderImage="url(border.png) 30 30 round"


可能的值
值: 描述:
border-image-source 用在边框的图片的路径。
border-image-slice 图片边框向内偏移。
border-image-width 图片边框的宽度。
border-image-outset 边框图像区域超出边框的量。
border-image-repeat 图像边框是否应平铺(repeated)、铺满(rounded)或拉伸(stretched)。



CSS相关:
CSS3边框http://bbs.mobiletrain.org/thread-468755-1-1.html
border-radius 属性http://bbs.mobiletrain.org/thread-468773-1-1.html
box-shadow 属性http://bbs.mobiletrain.org/thread-468774-1-1.html






0

主题

275

帖子

604

积分

大牛

Rank: 4

发表于 17-3-27 09:23:53 | 显示全部楼层
摄影师从来不会出现在镜头里。。

36

主题

192

帖子

424

积分

牛人

Rank: 3Rank: 3

发表于 17-3-27 09:25:35 | 显示全部楼层
赞一个

19

主题

230

帖子

520

积分

大牛

Rank: 4

发表于 17-3-27 09:27:23 | 显示全部楼层
相亲相爱 ,我期待千锋大家庭

9

主题

222

帖子

495

积分

牛人

Rank: 3Rank: 3

发表于 17-3-27 09:36:07 | 显示全部楼层
好顶赞!支持我大千锋

19

主题

230

帖子

520

积分

大牛

Rank: 4

发表于 17-3-27 09:37:48 | 显示全部楼层
好厉害,觉得凭千锋的资源和不断刷新的成绩,以后可以考虑为计算机人才行业成立新的标准

6

主题

212

帖子

473

积分

牛人

Rank: 3Rank: 3

发表于 17-3-27 09:41:22 | 显示全部楼层
很多很多的赞!

6

主题

306

帖子

680

积分

大牛

Rank: 4

发表于 17-3-27 09:43:08 | 显示全部楼层
好有爱,顶顶顶顶

5

主题

325

帖子

734

积分

大牛

Rank: 4

发表于 17-3-27 09:46:52 | 显示全部楼层
一直支持千锋

5

主题

325

帖子

734

积分

大牛

Rank: 4

发表于 17-3-27 09:53:59 | 显示全部楼层
赞一个,可惜现在里面没有自己啊,努力中
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

订阅|小黑屋|手机版|千锋教育论坛 ( 京ICP备12003911号-3 )

GMT+8, 20-4-3 03:46 , Processed in 0.341333 second(s), 44 queries .

Powered by Discuz! X3.2

© 2001-2017 Comsenz Inc.

快速回复 返回顶部 返回列表