搜索
首页web前端html教程轻松入门css3之border-image_html/css_WEB-ITnose

话说大家不管用过没用过,对border-image应该都有所耳闻,相比css2.1,css3的新东西那么多,为什么要挑这个来说呢,因为我个人经验来说,这个相对来说较难理解。那它到底是什么,又怎么用呢,有哪些需要注意的地方?这方面也有书籍和文章讲,如果你看过,却觉得没搞懂,也没弄明白怎么回事,那么希望这篇文章可以帮到你!我不会按常理出牌~

首先要跟大家说的是,不要先入为主的走入一个死胡同,不然很难走出来,图片边框,跟使用线型边框的时候不一样,这个思维要转换过来,使用线型边框的时候,你只需要设置“边框宽度”、“类型”和“颜色”。那么边框就出来了,使用图片的时候你可不能照搬,它有自己的一套规则,所以,请清空你的脑袋,忘却才能更好的学习(这话好像在武侠片里比较常用)~

你需要掌握的要领只有两点:

一、图片裁剪的方式

二、为什么要裁剪,裁剪完之后做了哪些动作?

先来说第一点

不要觉得这是有多麻烦,多深奥,大家都玩儿过一种智力游戏吧,叫做“你能用几刀把一个正方形切成九块?”或者说“只用几刀你能把什么切成多少块”,等等。图片裁剪是一个道理,是不是瞬间觉得亲切很多?它就是横竖各两刀来把你所选取的图片切成九份,就是很多资料里说的“九宫格”模样,是怎么切的呢?注意,切的次数是4,这个数字蛮熟悉的吧,margin、padding、border等这些都是有四个方向的规则吧,此处也一样,遵循上、右、下、左,那是怎么测量的呢?你应该猜到了,是从边缘向里测量,也就是上边缘向下,右边缘向左,依次类推。像其他规则一样,你同样可以简写之,写一个,两个、三个都没问题,有注意事项会在下面奉上!~

再说第二点

或许会有人说,我看你说怎么测量,怎么裁剪,头都大了,到底是要干嘛啊?我就用个边框还搞这么复杂。相信我,并不复杂,为了更好的说明裁剪完成之后干嘛,来拿张图片,这也是w3c教程网的图片

先这么粗糙的给大家画一幅,已经切成九块了对吧,那接下来,要干嘛呢,要发功了!呵呵,开玩笑。

图片边框的绘制进入了最后一步,也是最关键的一步:

切记,四个角是不动的,也就是说,当你应用了这个图片作为边框,四个角还是红色菱形,你也控制不了它(除了尺寸)。那中间呢,中间也是不显示的,大漠哥的文章里把它称为“盲区”,是的,拿掉!就只剩四个黄色菱形了。接下来,我们就来正经的讲一下,会发生什么。我做一个形象的比喻吧,给元素加上这么一个边框,就相当于找了一个图片,然后按你想要的区域 把中间掏空,接下来向四周撑开!

来看一下格式:

border-image:url(图片路径)    裁剪尺寸   裁剪过后的显示方式(就上图来说,就是四个黄色菱形的排列方式)

排列方式有三种round、repeat、stretch分别来看一下是什么效果

round(平铺)

.box{border-image:url("../images/border.png") 27 round;border-width:27px;width:800px;height:100px;background:#0CC;}

效果

repeat(重复)

.box{border-image:url("../images/border.png") 27 repeat;border-width:27px;width:800px;height:100px;background:#0CC;}

效果

stretch(拉伸)

.box{border-image:url("../images/border.png") 27 stretch;border-width:27px;width:800px;height:100px;background:#0CC;}

效果

注:IE开发者平台还给出了另一种方式:space,据我测试,跟repeat没看出来有什么区别,你可以试试,如果有新发现欢迎交流~

好吧,三种展示完了,相信用过背景图片或者设置过电脑桌面图片的人,对平铺和拉伸都很熟悉吧,这个不难理解。现在该说注意事项了。

短短的一段代码到底藏有多少玄机呢?(故弄玄虚了哈~)

1、图片路径一定不要错,可为绝对或相对路径

2、大家应该注意到裁剪的数值,用了27,这是因为图片的宽高均为81,使用27能把它的边进行三等分,剪出三个完整菱形,说白了就是好看,你想用多大用多大,这个不影响你成功的使用它,当然,要在原图尺寸范围内,你也可以尝试0或者81是什么效果~另外,它没带单位,是的, 它默认单位就是“px”,带上单位反而会错!!

3、使用显示方式的时候你可以只写一个,就像我上面那样,也可以写两个,但切记,你不能以此类推的说,可不可以写三个或者四个呢?不行!不仅诸如 round repeat stretch这样的不行,round repeat round和round repeat round repeat这样看似合理的也是不行的!!当然,你不写也可以,默认值是 stretch。

给出stretch round 结合的效果,注意,前面一个控制上下,后面一个控制左右。

4、边框的宽度,首先这个是必须设置的,不然是不会有任何反应的,另外, 边框的宽度和原始图片无关原始图片只是你用来做选取 的,你所设置的边框宽度比选取的部分更大或者更小都没有关系,可以是任意的正常数值,你所选取的部分图片会 等比例缩放 以正常显示

以上四点,便是需要注意的基本的东西,任何一点出错你都将看不到任何效果,如果你在练习的时候出现问题,可以先检查一下,另外,注意单词的拼写这样的低级错误不要犯。

其实,你还是会有一些困惑的,不是么

一、repeat和round怎么那么像呢,有什么区别呢?

是的,这哥俩是很像,你也可以看出来,repeat似乎不像round那么完美,是会在两端留有瑕疵的,我们可以看做是它仅仅承担了重复的任务,而且是有中间向两端进行重复,而round不仅承担了重复的任务,还平衡了一下总宽度和所选取部分图片的宽度,让图片刚刚好能完整的平铺。

二、为什么不能直接选择一个图片,控制大小,控制水平、垂直方向的显示方式就完事儿了呢?

如果真的是那样的话,也没什么不可以,但是现在这种做法能完成更多更有意思的东西,而且,使用好边框图片需要做好两件事情,第一是做出一张好的图片,第二是以你想要的方式进行裁剪,这样赋予了它更多的灵活性,而且,如果你有足够的好奇心和创造力,它的强大超乎你想象!上面只是一个简单的实例,如果你想,你可以把四条边和四角换成任意图象,这都由你来决定!~比如上例,你把菱形全都做成红色或者黄色,那么就是一个四边完全一致的图片边框了,so easy!~

说了这么多,上面是要做出边框的必备事物,该献上border-image的完整格式了

border-image: url("图片路径") 裁剪尺寸 /边框宽度 /边框图象超出边框的量 显示方式;

看到这个你会说,怎么比刚才多出两个呢,是的,这个是把所有的都缩写到一条规则里了,而且要按照格式来,比如“/”是

不能去掉的,不然整条规则又一命呜呼了,那边框图象超出边框的量是什么意思呢?我们所设定的边框图象是占据了所定

义的固定宽度的空间,默认超出为0;下面给出超出5px的样子。

.box{border-image:url("../images/border.png") 27 /30px /5px stretch round;

看到区别了么?四边都超出去了5px,作为常理,像这种用来控制距离的东西,可以正

就可以负咯?不好意思,这个真没有!~但是它可以遵循上、右、下、左的规则,也可以简写。

总结,如果你想简写

border-image: url("图片路径") 裁剪尺寸 /边框宽度;

这个组合就是必须的了。其他用来锦上添花。

说了这么多,不知你是否已经明了?如果还是没明白,那么请动手做一下吧,只要提到的那四条注意事项不出错,基本就没问题了。另附大漠哥文章 http://www.w3cplus.com/content/css3-border-image ,个人认为,你先能做出来基本的效果再看收获会更大,还有惊喜,不然可能很晕。

IE开发人员中心相关内容 http://msdn.microsoft.com/library/ie/dn384064.aspx

声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
公众号网页更新缓存难题:如何避免版本更新后旧缓存影响用户体验?公众号网页更新缓存难题:如何避免版本更新后旧缓存影响用户体验?Mar 04, 2025 pm 12:32 PM

公众号网页更新缓存,这玩意儿,说简单也简单,说复杂也够你喝一壶的。你辛辛苦苦更新了公众号文章,结果用户打开还是老版本,这滋味,谁受得了?这篇文章,咱就来扒一扒这背后的弯弯绕绕,以及如何优雅地解决这个问题。读完之后,你就能轻松应对各种缓存难题,让你的用户始终体验到最新鲜的内容。先说点基础的。网页缓存,说白了就是浏览器或者服务器为了提高访问速度,把一些静态资源(比如图片、CSS、JS)或者页面内容存储起来。下次访问时,直接从缓存里取,不用再重新下载,速度自然快。但这玩意儿,也是个双刃剑。新版本上线,

如何使用HTML5表单验证属性来验证用户输入?如何使用HTML5表单验证属性来验证用户输入?Mar 17, 2025 pm 12:27 PM

本文讨论了使用HTML5表单验证属性,例如必需的,图案,最小,最大和长度限制,以直接在浏览器中验证用户输入。

如何高效地在网页中为PNG图片添加描边效果?如何高效地在网页中为PNG图片添加描边效果?Mar 04, 2025 pm 02:39 PM

本文展示了使用CSS为网页中添加有效的PNG边框。 它认为,与JavaScript或库相比,CSS提供了出色的性能,详细介绍了如何调整边界宽度,样式和颜色以获得微妙或突出的效果

HTML5中跨浏览器兼容性的最佳实践是什么?HTML5中跨浏览器兼容性的最佳实践是什么?Mar 17, 2025 pm 12:20 PM

文章讨论了确保HTML5跨浏览器兼容性的最佳实践,重点是特征检测,进行性增强和测试方法。

< datalist>的目的是什么。 元素?< datalist>的目的是什么。 元素?Mar 21, 2025 pm 12:33 PM

本文讨论了html< datalist>元素,通过提供自动完整建议,改善用户体验并减少错误来增强表格。Character计数:159

> gt;的目的是什么 元素?> gt;的目的是什么 元素?Mar 21, 2025 pm 12:34 PM

本文讨论了HTML< Progress>元素,其目的,样式和与< meter>元素。主要重点是使用< progress>为了完成任务和LT;仪表>对于stati

我如何使用html5< time> 元素以语义表示日期和时间?我如何使用html5< time> 元素以语义表示日期和时间?Mar 12, 2025 pm 04:05 PM

本文解释了HTML5< time>语义日期/时间表示的元素。 它强调了DateTime属性对机器可读性(ISO 8601格式)的重要性,并在人类可读文本旁边,增强Accessibilit

< meter>的目的是什么。 元素?< meter>的目的是什么。 元素?Mar 21, 2025 pm 12:35 PM

本文讨论了HTML< meter>元素,用于在一个范围内显示标量或分数值及其在Web开发中的常见应用。它区分了< meter>从< progress>和前

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
2 周前By尊渡假赌尊渡假赌尊渡假赌
仓库:如何复兴队友
4 周前By尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
3 周前By尊渡假赌尊渡假赌尊渡假赌

热工具

DVWA

DVWA

Damn Vulnerable Web App (DVWA) 是一个PHP/MySQL的Web应用程序,非常容易受到攻击。它的主要目标是成为安全专业人员在合法环境中测试自己的技能和工具的辅助工具,帮助Web开发人员更好地理解保护Web应用程序的过程,并帮助教师/学生在课堂环境中教授/学习Web应用程序安全。DVWA的目标是通过简单直接的界面练习一些最常见的Web漏洞,难度各不相同。请注意,该软件中

Atom编辑器mac版下载

Atom编辑器mac版下载

最流行的的开源编辑器

Dreamweaver Mac版

Dreamweaver Mac版

视觉化网页开发工具

PhpStorm Mac 版本

PhpStorm Mac 版本

最新(2018.2.1 )专业的PHP集成开发工具

SecLists

SecLists

SecLists是最终安全测试人员的伙伴。它是一个包含各种类型列表的集合,这些列表在安全评估过程中经常使用,都在一个地方。SecLists通过方便地提供安全测试人员可能需要的所有列表,帮助提高安全测试的效率和生产力。列表类型包括用户名、密码、URL、模糊测试有效载荷、敏感数据模式、Web shell等等。测试人员只需将此存储库拉到新的测试机上,他就可以访问到所需的每种类型的列表。