更新于

CSS边框图片属性border-image

发布于 / 分类: CSS / 暂无评论 / 阅读量: 47

今天学了边框图片,说实话听的是一脸懵逼,个人比较纠结于“大局”,所以一直卡在角和边的设定上,后来经过自己实际测试,得出了一些心得。


基本写法:border-image:url(xxx.jpg) 50/20px round;

url就是调用一张素材图片

50是一个没有写单位的数字,意思是裁剪出素材图片中的对应大小,比如这张图有500px的宽度,我们只要其中左边的50,那么我们就写50就好了,如果你要单独设置四个角,那就要都分开写,会很麻烦,就不说了,自己看字典把!

20px就是边框需要展示出来的图片宽度,比如我只要你的边框图片显示50px,那就写50px,而且边框的图片和背景的效果有些相同,他是不会把内容部分给挤下去的。

round是边框除去四个角后剩下的部分图片的排列方式,round是根据边框剩余的大小,自动调整图片尺寸,直到填满为止。


根据以上,我们简单点来说就是,先设置边框的四个角,再来设置剩下的边,这么一说其实就很容易理解的,而更深入的不过是一些灵活性的设置和没卵用的功能,感觉边框图片我平时碰到的比较少,毕竟你想想,如果是多个平台设备访问同一个网页,电脑端可能没啥问题,但是手机端呢,你的边框不就会自动变小吗,那么边框的图片也会有一定的变形,说不定手机端还不支持呢,那有人会说,我们可以设置简单的图案啊,简单的图案,那我们放着border中的边框样式不用,留着吃灰啊,而且一些高级效果,内外发光,我们完全可以通过box-shadow的阴影属性来达到要求,而且边框图片会根据你素材会有一定的间隙,你想要让边框图片大一点,就只能调整边框图片的宽度或者去修改素材的大小,感觉上不是很好用,不知道是我暂时还没遇到还是怎么样。

暂无评论

Info
站点信息

以前觉得活下去很难,现在发现活的好才难!

创建于20156

总共发表了327篇文章

共有545条评论

创建了21个分类目录

Archive
时间归档
Weather
天气

湿度
Catalog
目录树
设置
配色方案

布局