鱼C论坛

 找回密码
 立即注册
查看: 3360|回复: 2

CSS3 HTML5实例二(图形化边界)

[复制链接]
发表于 2012-6-26 03:03:37 | 显示全部楼层 |阅读模式

马上注册,结交更多好友,享用更多功能^_^

您需要 登录 才可以下载或查看,没有账号?立即注册

x
lf03t42kt869.jpg

顾名思义,图形化边界就是允许使用图片作为对象的边界,语法如下:

  1. border: 5px solid #cccccc;-webkit-border-image: url(/images/border-image.png) 5 repeat;-moz-border-image: url(/images/border-image.png) 5 repeat;border-image: url(/images/border-image.png) 5 repeat;
复制代码



这里,border: 5px 设定了边界的宽度,然后,每个边界的图片定义告诉浏览器,使用图片的多大一部分来充当边界。边界图片还可以针对每一条边单独设置:

  1. border-bottom-rightright-imageborder-bottom-imageborder-bottom-left-imageborder-left-imageborder-top-left-imageborder-top-imageborder-top-rightright-imageborder-right-image
复制代码



支持的浏览器: Firefox 3.1, Safari , Chrome.

想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
发表于 2015-5-3 14:32:00 | 显示全部楼层
谢谢小甲鱼老师
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2015-5-26 05:52:54 | 显示全部楼层
小甲鱼_工具篇
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2024-4-25 16:08

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

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