搜索
首页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
HTML与CSS和JavaScript:比较Web技术HTML与CSS和JavaScript:比较Web技术Apr 23, 2025 am 12:05 AM

HTML、CSS和JavaScript是构建现代网页的核心技术:1.HTML定义网页结构,2.CSS负责网页外观,3.JavaScript提供网页动态和交互性,它们共同作用,打造出用户体验良好的网站。

HTML作为标记语言:其功能和目的HTML作为标记语言:其功能和目的Apr 22, 2025 am 12:02 AM

HTML的功能是定义网页的结构和内容,其目的在于提供一种标准化的方式来展示信息。1)HTML通过标签和属性组织网页的各个部分,如标题和段落。2)它支持内容与表现分离,提升维护效率。3)HTML具有可扩展性,允许自定义标签增强SEO。

HTML,CSS和JavaScript的未来:网络开发趋势HTML,CSS和JavaScript的未来:网络开发趋势Apr 19, 2025 am 12:02 AM

HTML的未来趋势是语义化和Web组件,CSS的未来趋势是CSS-in-JS和CSSHoudini,JavaScript的未来趋势是WebAssembly和Serverless。1.HTML的语义化提高可访问性和SEO效果,Web组件提升开发效率但需注意浏览器兼容性。2.CSS-in-JS增强样式管理灵活性但可能增大文件体积,CSSHoudini允许直接操作CSS渲染。3.WebAssembly优化浏览器应用性能但学习曲线陡,Serverless简化开发但需优化冷启动问题。

HTML:结构,CSS:样式,JavaScript:行为HTML:结构,CSS:样式,JavaScript:行为Apr 18, 2025 am 12:09 AM

HTML、CSS和JavaScript在Web开发中的作用分别是:1.HTML定义网页结构,2.CSS控制网页样式,3.JavaScript添加动态行为。它们共同构建了现代网站的框架、美观和交互性。

HTML的未来:网络设计的发展和趋势HTML的未来:网络设计的发展和趋势Apr 17, 2025 am 12:12 AM

HTML的未来充满了无限可能。1)新功能和标准将包括更多的语义化标签和WebComponents的普及。2)网页设计趋势将继续向响应式和无障碍设计发展。3)性能优化将通过响应式图片加载和延迟加载技术提升用户体验。

HTML与CSS vs. JavaScript:比较概述HTML与CSS vs. JavaScript:比较概述Apr 16, 2025 am 12:04 AM

HTML、CSS和JavaScript在网页开发中的角色分别是:HTML负责内容结构,CSS负责样式,JavaScript负责动态行为。1.HTML通过标签定义网页结构和内容,确保语义化。2.CSS通过选择器和属性控制网页样式,使其美观易读。3.JavaScript通过脚本控制网页行为,实现动态和交互功能。

HTML:是编程语言还是其他?HTML:是编程语言还是其他?Apr 15, 2025 am 12:13 AM

HTMLISNOTAPROGRAMMENGUAGE; ITISAMARKUMARKUPLAGUAGE.1)htmlStructures andFormatSwebContentusingtags.2)itworkswithcsssforstylingandjavascript for Interactivity,增强WebevebDevelopment。

HTML:建立网页的结构HTML:建立网页的结构Apr 14, 2025 am 12:14 AM

HTML是构建网页结构的基石。1.HTML定义内容结构和语义,使用、、等标签。2.提供语义化标记,如、、等,提升SEO效果。3.通过标签实现用户交互,需注意表单验证。4.使用、等高级元素结合JavaScript实现动态效果。5.常见错误包括标签未闭合和属性值未加引号,需使用验证工具。6.优化策略包括减少HTTP请求、压缩HTML、使用语义化标签等。

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脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热工具

SublimeText3 Linux新版

SublimeText3 Linux新版

SublimeText3 Linux最新版

VSCode Windows 64位 下载

VSCode Windows 64位 下载

微软推出的免费、功能强大的一款IDE编辑器

MinGW - 适用于 Windows 的极简 GNU

MinGW - 适用于 Windows 的极简 GNU

这个项目正在迁移到osdn.net/projects/mingw的过程中,你可以继续在那里关注我们。MinGW:GNU编译器集合(GCC)的本地Windows移植版本,可自由分发的导入库和用于构建本地Windows应用程序的头文件;包括对MSVC运行时的扩展,以支持C99功能。MinGW的所有软件都可以在64位Windows平台上运行。

Dreamweaver Mac版

Dreamweaver Mac版

视觉化网页开发工具

DVWA

DVWA

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