读书频道 > 网站 > 网页设计 > HTML5精粹:利用HTML5开发令人惊奇的Web站点和革命性应用
3.1.12 边框图像
12-11-22    奋斗的小年轻
收藏    我要投稿   
Amazon畅销书,被翻译成西班牙语等多种文字,广受好评,被誉为HTML5领域的经典著作。详尽地讲解和分析了HTML5中的所有新特性和核心技术,能为有一定HTML基础的读者迅速提升HTML5开发技能提供绝佳指导。全书包含2...立即去当当网订购

属性border和outline实现的效果仅限于单线及其他一些配置选项。新属性border-image则不存在这个限制,设计者可以控制边框的质量和种类,设置自定义的边框图像。

动手实践:我们将使用钻石型PNG图像测试这个属性。通过下面的链接从我们的网站下载文件diamond.png,然后将文件复制到CSS文件所在文件夹或目录:www.minkbooks.com/content/diamonds.png。

border-image属性使用一幅图像作为图案。根据所设置的值,图像可以分割为不同部分,然后这些部分会围绕对象构成边框(见图3-1)。


 

为了实现这个边框效果,需要指定三个属性:图像文件名称与位置、分割图案得到的块数和指定各部分围绕对象分布方式的关键字。

通过代码清单3-18的修改,标题框的边框就变成29像素,并且使用图像diamonds.png创建边框。border-image属性中的29表示块数,而stretch是将这些块分布在框四周的方法之一。

代码清单3-18:标题框的自定义边框

#mainbox {
  display: block;
  width: 500px;
  margin: 50px auto;
  padding: 15px;
  text-align: center;
  border: 29px;
  -moz-border-image: url("diamonds.png") 29 stretch;
  -webkit-border-image: url("diamonds.png") 29 stretch;
  border-image: url("diamonds.png") 29 stretch;
}

最后一个属性还可以设置其他三个值。关键字repeat表示重复显示图像的块,以覆盖元素各边。在这个例子中,各块的尺寸是固定的,如果显示空间不足,图像会被切割。关键字round用于控制覆盖的边长,然后对块进行拉伸,保证不切割各个块。最后,关键字stretch(代码清单3-18所使用)会将一个块拉伸到覆盖整个边长。

使用border属性设置边框尺寸,但是也可以使用border-width为元素各边设置不同的尺寸(border-width属性使用4个参数,语法与margin和padding类似)。各个块的尺寸也有相同的设置方法;最多可以声明4个值,分别从图案中获取不同尺寸的图像。

动手实践:将代码清单3-11的代码替换成代码清单3-18的代码,在浏览器上测试其显示效果。

点击复制链接 与好友分享!回本站首页
分享到: 更多
您对本文章有什么意见或着疑问吗?请到论坛讨论您的关注和建议是我们前行的参考和动力  
上一篇:1.3 功能
下一篇:1.5 小结
相关文章
图文推荐
JavaScript网页动画设
1.9 响应式
1.8 登陆页式
1.7 主题式
排行
热门
文章
下载
读书

关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训
版权所有: 红黑联盟--致力于做最好的IT技术学习网站