.module{border-image-source:url(border.png);} 该属性指明了边框图片的地址。属性值可以是URL,数据URI,CSS渐变形状,或者行内SVG(尽管支持度有限,详情见SVG usage notes一节) border-image-slice .module{border-image-source:url(border.png);border-image-slice:20;} 该属性值指定浏览器从某处裁剪源图片以获...
--icon: url("data:image/svg+xml,%3Csvg width='100%' height='100%' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M30 2a2 2 0 1 0-4 0v8c0 8.837-7.163 16-16 16H2a2 2 0 1 0 0 4 2 2 0 1 0 0 4h8c8.837 0 16...
--icon: url("data:image/svg+xml,%3Csvg width='16' height='16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15.021 8.028L15 8.027c-.262-.26-.876-.747-2.008-.701.13-.314.027-1.204-.676-1.227.179.574-.803.974-1.361 1.155-.484.156-1.025.344-1.16.622l-.437-.00...
div{width:100px;height:100px;border:2px solid transparent;background-image:linear-gradient(var(--bg),var(--bg)),linear-gradient(180deg,red,orange);/* 前一个为内容背景色,后面为边框渐变色 */background-origin:border-box;background-clip:content-box,border-box;border-radius:0px;animation:2s ...
CSS中border-image的使用 border-image 这个属性可以实现很多特殊的效果,其中常见的有九宫格。我们需要记住的是源图像的划分和九宫格的尺寸控制。其中源图像是由九个格子构成,如果每个格子尺寸是36*36的尺寸,那么我们就可以设置border-image: url('./1.svg') 36,那么显示的...
border: 1px solid red; border-right: 2px solid blue; height: 60px; width: 60px; } 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 清除边框 将样式值设置为none或0即可 边框-圆角 border-radius 值可以为长度单位 px 等,或用 % ,值为 50% 时矩形会变为椭圆,正方形会变为圆形! 边框的每个...
border-right: 1px solid var(--borderColor); } &:hover::before, &:hover::after { width: calc(100% + 9px); height: calc(100% + 9px); } } CodePen Demo -- width border animation 接下来,会开始加深一些难度。 虚线边框动画 使用dashed 关键字,可以方便地创建虚线边框。
除了上述的三种方法之外,还可以使用border-image方法,使用border-image方法需要备好一种图,作为边框图片源: 左图是边框图片源,右侧是使用下面代码得到的效果: .borderimage-me { border: solid 5px; border-image: url(triple-stack-border.gif) 15 / 15px round; ...
border-image-source .module {border-image-source: url(border.png);} 该属性指明了边框图片的地址。属性值可以是URL,数据URI,CSS渐变形状,或者行内SVG(尽管支持度有限,详情见SVG usage notes一节) border-image-slice .module{border-image-source: url(border.png);border-image-slice: 20;} ...
border: 40px solid transparent; border-image: url(https://image.flaticon.com/icons/svg/648/648787.svg); border-image-slice: 100%; border-image-...