前端web的点9图效果实现
发布网友
发布时间:2022-10-12 21:07
我来回答
共1个回答
热心网友
时间:2023-10-05 11:07
这里只是一个怕自己忘记写的一个笔记,不是很全很详细,建议还是看 官方教程
图片原始像素是348 x 220
我的需求是拉伸image可以自适应内容长度,但是拉伸不能导致两边的半圆被拉成椭圆
border-image可以使用图片作为border(标准说法:border-image CSS属性允许在元素的边框上绘制图像), 给出图片后可以通过相应的参数来调整图片的拉伸,这样就可以像点9图那样保留部分内容不变的情况下,拉伸可拉伸部分来自适应。
我主要解释一下 border-image: url("") 0 170 0 170 fill / 1px 170px stretch ,
这里0 170 0 170就是划分了原始图片内容,称之为border-image-slice
后面的 1px 170px 指的是border-image-width ,字面意思是边框图片宽度,作用是将 DOM 节点分割成九宫格,这里指的就是作为实际容器的那个节点的显示范围了,我也设置为170, stretch作为border-image-repeat说明图片在超过原始长度后使用拉伸的方式
这里有更易读,更详细的文章 border-image的正解用法
点九图编辑器
https://developer.mozilla.org/zh-CN/docs/web/css/css_backgrounds_and_borders/border-image_generator (这个加载不出预览图)
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Backgrounds_and_Borders/Border-image_generator (这个可以加载出预览图)