|
|
请马上登录,朋友们都在花潮里等着你哦:)
您需要 登录 才可以下载或查看,没有账号?立即注册
x
本帖最后由 马黑黑 于 2021-12-24 13:18 编辑
我们已经介绍过 CSS 基于 border 属性设定的边框,现在是时候来了解一下 box 的图片边框了。在 CSS3 以前,边框的设定没有图片什么事,现在不同了,CSS3 引入了 borde-image 属性,可是使用图片来渲染边框;除了 IE 以外任何新版本的主流浏览器都支持该属性。
border-image并不复杂,但理解起来有些困难。我们从最基础的开始:
简略语法:border-image:url(图片) 图片剪裁值 图片呈现值
简单示例:border-image:url('图片地址') 27 round
其中:
(一)参数一 url('图片'):url 是保留词,图片地址写在其后小角括号内(论坛中建议再加上小角单引号)
(二)参数二 图片剪裁值:用纯数字表示,不需要像素单位,如 27 就是表示 27 个像素
(三)参数三 图片呈现值:缺省值是stretch(拉伸),也可选 repeat(重复)和 round(平铺)
(四)特别重要的,应给 border 设置样式与宽度(宽度值依据图片宽度除以3),以确保 border-image 的设定能有效渲染。以下是实例代码:
<div style="margin:4px auto;border:27px dashed transparent; border-image:url('图片地址') 27 repeat;">
内容
</div>
border-image 属性命令将根据用户设定将类似于如下的九宫格图片进行剪裁,然后用于渲染可视对象代表边框:
但不限于九宫格图片,其他结构的正方形图片亦可,长方形图片也能用(剪裁设定可能要繁琐一些)。
CSS3的 border-image 属性使用图片的原理理解起来有些烧脑,我试着用通俗的语言解说一下:
上述示例代码,告诉 CSS3 我们以 27 个像素将图片切割成九等分,CSS3 就能知道将图片的左上角那一份放在 div 的左上角,右上角取图片的右上角那一份,其余的两个角以此类推;四个边缘则取图片对应边缘的那一份,然后按呈现方式(拉伸、重复或平铺)渲染出效果。
从解释中,我们可以理解,九等分的图片中,中间那一份是用不到的,而我们在制作图片时,可以根据 CSS3 的渲染原理设计合乎我们需要的尺寸,比如各个边角可以有所不同、最中央的那个部分不予理睬。
不论图片结构如何,都应考虑图片被九等分切割后的单元尺寸,它应与我们在 CSS 语法中的切割指令所给的剪裁像素值相符。换言之,若图片长宽为 90×90,则 border 设为 30px 的宽度,border-image 剪裁值设为 30 ,所设定的 border 宽度和图片的剪裁数值是图片边缘长度的三分之一、与九等分后的图片单元保持一致。
border-image 是一个简写属性的语句,如果需要一项一项地设置,请参照如下语法一一尝试:
border-image-source url(图片地址)
border-image-slice 图片边框向内偏移
border-image-width 图片边框的宽度
border-image-outset 边框图像区域超出边框的量
border-image-repeat 平铺(repeated)、铺满(rounded)或拉伸(stretched)
border-image 还有很多可探讨的知识,本帖到此为止。
效果在楼下——
|
评分
-
| 参与人数 2 | 威望 +80 |
金钱 +160 |
经验 +80 |
收起
理由
|
樵歌
| + 50 |
+ 100 |
+ 50 |
赞一个! |
加林森
| + 30 |
+ 60 |
+ 30 |
赞一个! |
查看全部评分
|