css3中的border-image用法

水深无声 2022-07-16 13:08 243阅读 0赞

[css3\_快速弄明白border-image][css3_border-image]

[鑫空间链接—][Link 1]

[ CSS3 border-image 不同浏览器的表现记录][CSS3 border-image]

在border-iamge中如果用number表示切割边框的宽度，其后不用加单位，直接数字如27,而不是27px,因为border-image的默认单位就是px..

border-image的宽度上/右/下/左（顺时针方向），分别是切割线与图像边框的距离。

上20px,表示切割线与图像上边框的距离。

右30px表示右切割线与图像右边框的距离。

下左类似，也可以用百分比表示(是指图像宽度和高度的百分比)。

类似于css中clip:rect(),，不过又与clip中的（top,right,bottom,left）的含义不一样，clip是以左上角为坐标原点。并且clip中的四个值不能缩写。

clip(top,right,bottom,left)是指表示的含义就是：最终剪裁的矩形的上边距离原始元素的上边缘30像素；剪裁矩形的右边缘距离原元素左边缘的距离是200像素；剪裁矩形的下边缘距离原元素顶部的距离为200像素；剪裁矩形的左边缘距离原元素左边缘的距离时20像素。

而border-image中的四个宽度可以缩写，并且分别表示与对应边的距离。

那切割好的图像在元素边框中怎样显示呢？

四个角的图像不变化，上下左右拉伸重复或平铺，切割图像中间的部分(即九宫格中间的部分)既有左右的变化效果，又有上下的变化效果。

九宫格中的图像放在元素边框的九个部分，随着元素边框的宽度的变化而变化（元素的边框要宽了，border-image图像也跟着变大，元素的边框要窄了，border-image图像也跟着变窄。）。

[css3_border-image]: http://www.cnblogs.com/niuniu/archive/2010/06/21/1761803.html
[Link 1]: http://www.zhangxinxu.com/wordpress/2010/01/css3-border-image/
[CSS3 border-image]: http://blog.csdn.net/jjbob77/article/details/8263073

发表评论取消回复

表情：

评论列表（有 0 条评论，243人围观）

还没有评论，来说两句吧...

相关阅读

相关 CSS3中的注释标记及其用法

CSS（层叠样式表）是一种用于描述网页上元素样式的语言。在CSS3中，我们可以使用注释标记来添加注释，以便在代码中记录相关信息或者临时禁用某些样式规则。本文将介绍CSS3注释标

秒速五厘米/ 2023年10月16日 18:16/ 0 赞/ 167 阅读

相关 CSS3 的 appearance用法

Webkit下的appearance属性值 checkbox radiopush-button square-button button

素颜马尾好姑娘i/ 2022年10月01日 13:43/ 0 赞/ 227 阅读

相关 css3中的box-sizing的用法

在css3中box-sizing属性: content-box box-size inherit content-box是css2.1规定的元素的宽度

淡淡的烟草味﹌/ 2022年07月19日 02:30/ 0 赞/ 287 阅读

相关 css3中的border-image用法

[css3\_快速弄明白border-image][css3_border-image] [鑫空间链接—][Link 1] [ CSS3 bord

水深无声/ 2022年07月16日 13:08/ 0 赞/ 244 阅读

相关 css3中的box-shadow的用法与text-shadow的用法

[box-shadow全面解析][box-shadow] [CSS3 box-shadow 属性][CSS3 box-shadow] [box-s

痛定思痛。/ 2022年07月16日 12:53/ 0 赞/ 192 阅读

相关 css3中skew与rotateX(),rotateY()的用法

skew()意思是扭曲，歪斜，是2d转换，即使看着像是3d转换。关于skew()的最好的解释 [ 链接文章][Link 1]（好像是skew的垂直轴为x-axis

本是古典何须时尚/ 2022年07月13日 02:59/ 0 赞/ 194 阅读

相关 css3中的skew的用法

skew(xdeg,ydeg);用于斜拉变换。当只有一个参数时，第二个参数为0. [链接][Link 1] [Link 1]: http://zyxn.bl

以你之姓@/ 2022年06月18日 00:51/ 0 赞/ 248 阅读

相关 css3中transform-style的用法

设置内嵌的元素在 3D 空间如何呈现。 transform-style:flat(默认)|perserve-3d [链接1][1] [例子1][1 1]

深藏阁楼爱情的钟/ 2022年06月18日 00:45/ 0 赞/ 229 阅读

相关 css3 中的calc用法

定义与用法 calc() 函数用于动态计算长度值。 1.需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)； 2.

柔光的暖阳◎/ 2022年05月21日 04:23/ 0 赞/ 297 阅读

相关 CSS3 弹性盒子用法

弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。弹性容器通过设置 display 属性的值为 flex 或 inline-flex

偏执的太偏执、/ 2021年11月02日 01:58/ 0 赞/ 397 阅读