数据可视化的边框图片切割

最新推荐文章于 2024-05-26 16:06:03 发布

VIP文章好奇的布偶猫

最新推荐文章于 2024-05-26 16:06:03 发布

阅读量650

点赞数 5

文章标签： javascript

本文链接：https://blog.csdn.net/weixin_45785652/article/details/106649569

版权

css3中自适应边框图片运用：
组合写法：

border-image: url("images/border.jpg") 167/20px round;

拆分写法：

border-image-source: url("images/border.jpg");
border-image-slice: 167 167 167 167;
border-image-width: 20px;
border-image-repeat: round;

解释：

边框图片资源地址
裁剪尺寸（上右下左）单位默认px，可使用百分百。
边框图片的宽度，默认边框的宽度。
平铺方式：
- stretch 拉伸（默认）
- repeat 平铺，从边框的中心向两侧开始平铺，会出现不完整的图片。
- round 环绕，是完整的使用切割后的图片进行平铺。

DEMO代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>边框图片</title>
    <style>
        ul{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        li{
            width: 350px;
            height: 1

最低0.47元/天解锁文章

好奇的布偶猫

关注

5
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
数据可视化的边框图片切割

css3中自适应边框图片运用：组合写法：border-image: url("images/border.jpg") 167/20px round;拆分写法：border-image-source: url("images/border.jpg");border-image-slice: 167 167 167 167;border-image-width: 20px;border-image-repeat: round;解释：边框图片资源地址裁剪尺寸（上右下左）单位默认px
复制链接

扫一扫