• 我转过几个弯 绕过那个小雨楼
  • 拿着蒲扇摆着衣衫渡着紧箍咒
  • 不问天涯不停留 喝过几壶酒
  • 不过年少白头道义放胸口
  • 倘若明天之后 遥看前尘剑封侯
  • 似那天上神仙无所求
  • 朝朝暮暮君如梦醒十分不为何理由
  • 是真是假是惶恐是无休
  • 路过这风雨花满楼 片刻都不停留
  • 我本这书生进京赶考留下许多愁
  • 你问有没有时候 我叹这天道默悠悠
  • 能否与我一醉方休
  • 又过了几个弯 算尽天量道莫慌
  • 踏这田园闻这芳草香
  • 跌跌撞撞仗剑天涯折煞不枉无笔良
  • 是梦是幻是温柔是家乡
  • 路过这风雨花满楼 片刻都不停留
  • 我本这书生进京赶考留下许多愁
  • 你问有没有时候 我叹这天道默悠悠
  • 能否与我一醉方休
  • 路过这风雨花满楼 片刻都不停留
  • 我本这书生进京赶考留下许多愁
  • 你问有没有时候 我叹这天道默悠悠
  • 能否与我一醉方休
  • 谁能与我一醉方休

CSS边框图片属性border-image

121 0

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


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

url就是调用一张素材图片

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

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

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


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

0
  • 本文分类:CSS
  • 本文标签:cssborderborder-image边框图片css教程
  • 流行热度:已超过 121 人围观了本文
  • 最后更新:2018年04月11日 - 15时26分43秒
  • 发布日期:2017年07月30日 - 0时35分00秒
  • 版权申明:本文系作者@木灵鱼儿原创发布在木灵鱼儿 - 有梦就能远航站点。未经许可,禁止转载。

相关文章

微信收款码
微信收款码