css3——border-image属性的用法
项目需求是实现鼠标移到按钮上时,下方显示一张渐变的三角图片,于是想到使用border-image来实现。
实现要使用图片做边框背景我们至少需要border-image-source
以及 border-image-slice
、 border-style
。
border-image-source
:通过url引入图片; eg. border-image-source: linear-gradient(red, blue);//可实现渐变色的边框。
border-image-slice : top right bottom left;
border-image-width :图片宽度;
border-image-outset : 使边框图片向外偏移 (值没有单位的哦)
示例:
border-image-outset: 20;//图片向外偏移20
border-image-width: 20px;//图片宽度为20px(图片的原本尺寸为 20px * 17px )
border-image-slice: 0 0 30 0;//只在下边设置图片。其他的三个方向就不会有图片显示。
margin-bottom: 10px;//这一步特别重要,因为布局菜单组使用的 ul->li格式布局的,且鼠标点击按钮时,被选中的按钮下方才出现图片,否则不会出现;当时在项目中
没有使用margin-bottom属性,出现的图片没有完全脱离li,始终扒在li下方的border部分,与需求不符。且在IE和火狐浏览器中访问页面时,更是奇丑无比。
至此,才算基本上解决border-image在使用过程中只显示一方的问题。
除此之外,使用一个完整的边框图片作为边框加在div上面,需求又是另外一种:
当第一次将边框图像引入div时,完整的边框会呈现出等分的四个又像是复制后的缩小版,总之是四个分为两排显示,而我想要的是使之将整个div包裹住,于是有了下面的代码:
这样做的效果正常显示没问题,但是窗口或者div宽高变大即(easyui-window窗口可最大化)时,border_image属性展示的边框会显示不完全,也不会平铺或者重复布满整个window
border-image-source: url("xx/image/xx.png");
border-image-width: 800px;//边框图片的真实宽度;
border-image-slice: 340;//这个数值我也没弄明白为哈可以这么大;
border-image-outset: 10;//向外偏移10px,可使边框内部的内容不是那么紧凑
border-image-repeat: round;//该属性平铺,不拉伸也不重叠
border-image实现渐变色的边框:
border-image-source: linear-gradient(red, blue);
border-image-slice: 20;
于是又采用另外一种方式来引用border-image ,这种方式实现的border-image能够将window窗口包裹住,并且当拉大窗口或者最大化时border-image也随之拉大,只是采用的方式是重复平铺的方式(若是将border-image图片使用边框一样的图案,则不会感觉是重复边框的)
border: 15px solid transparent; //相当于边框的宽度,值越大边框宽度越宽,反之越窄
-webkit-border-image: url("../../../src/assets/image/table_border.png") 27 27 24 24 round;// 27 27 24 24分别表示边框在上、右、下、左四个方向上的偏移量
-moz-border-image: url("../../../src/assets/image/table_border.png") 27 27 24 24 round;
border-image: url("../../../src/assets/image/table_border.png") 27 27 24 24 round;
width: 800px;//图片的宽度
resize: both;//***有了此属性则使用的div内部右下角将出现一个小三角,表示可以随意拖动大小;要是没有该属性,则拉动窗口大小变化时,border_image不会随之
变化。或者说border-image显示不完整。
虽然在项目中完成了两个border-image的效果;实际上现在也是懵的。。。。。。。。api文档上面说的这个属性个人觉得卵用没得,模棱两可。。。
本文来自博客园,作者:小虾米吖~,转载请注明原文链接:https://www.cnblogs.com/LindaBlog/p/10721775.html
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
· DeepSeek 开源周回顾「GitHub 热点速览」