• 前端分享学习博客,探究前端相关技术,推动天朝前端发展,有任何问题都可以留言一起探究
  • 由于站内自链接问题,部分pre中的代码首字母使用大写以过滤筛选
  • 欢迎友链互换,还有,如果有大神请不要黑我的站点(o´・ェ・`o)
  • 如果你觉得博客还不错,请Ctrl+D收藏( *︾▽︾)

css3 border images

css3手册 薛 陈磊 825次浏览 已收录 0个评论 扫描二维码

通过css3中的border-image可以给元素设置图片边框,听起来不难理解,有三个要点要注意:

  1. 所指的图片是用来填充、充当边框的;

  2. 在哪里切割、区分边框;

  3. 定义中间部分是否应重复或拉伸;

取下面这张‘边框图片’做示例:

css3 border images

border-image属性取图像并将其分成九个部分,如井字格局。然后将角放置在角上,中间部分根据您的指定重复或拉伸,注意要给元素设置border-image要先给元素设置border,也就是说border-image依托于border;并且注意这里的border设置的是border:Xpx solid transparent,以让图片边框有显示的空间;

image重复的示例:

css3 border images

例子代码:

#borderimg {
    border: 10px solid transparent;
    padding: 15px;
    -webkit-border-Image: url(border.png) 30 round; /* Safari 3.1-5 */
    -o-border-Image: url(border.png) 30 round; /* Opera 11-12.1 */
    border-Image: url(border.png) 30 round;
}

image不重复拉伸的示例:

css3 border images

例子代码:

#borderimg {
    border: 10px solid transparent;
    padding: 15px;
    -webkit-border-Image: url(border.png) 30 stretch; /* Safari 3.1-5 */
    -o-border-Image: url(border.png) 30 stretch; /* Opera 11-12.1 */
    border-Image: url(border.png) 30 stretch;
}

Tip:提示:border-image属性实际上是border-image-source,border-image-slice,border-image-width,border-image-outset和border-image-repeat属性的缩写属性。

不同的border分割值可是展现不同的展现形式:

css3 border images

示例代码:

#borderimg1 {
    border: 10px solid transparent;
    padding: 15px;
    -webkit-border-Image: url(border.png) 50 round; /* Safari 3.1-5 */
    -o-border-Image: url(border.png) 50 round; /* Opera 11-12.1 */
    border-Image: url(border.png) 50 round;
}

#borderimg2 {
    border: 10px solid transparent;
    padding: 15px;
    -webkit-border-Image: url(border.png) 20% round; /* Safari 3.1-5 */
    -o-border-Image: url(border.png) 20% round; /* Opera 11-12.1 */
    border-Image: url(border.png) 20% round;
}

#borderimg3 {
    border: 10px solid transparent;
    padding: 15px;
    -webkit-border-Image: url(border.png) 30% round; /* Safari 3.1-5 */
    -o-border-Image: url(border.png) 30% round; /* Opera 11-12.1 */
    border-Image: url(border.png) 30% round;
}

浏览器支持情况:

css3 border images


薛陈磊的博客 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权 , 转载请注明css3 border images
喜欢 (2)
[905044086@qq.com]
分享 (0)
作者薛陈磊
关于作者:
非著名前端工程师,关注Html5、Css3、Javascript、Node.js和各种前端框架发展,学习管理技巧和团队建设方法,期待遇到更多前端小伙伴一起学习进步;
说点什么...
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址