登录  /  注册
首页 > web前端 > css教程 > 正文

详细了解CSS3中的border-image-slice属性

青灯夜游
发布: 2021-02-15 09:41:38
转载
3154人浏览过

详细了解CSS3中的border-image-slice属性

【推荐教程:CSS视频教程 】

首先我们来了解一下它是干嘛的。

说明:

文档说明:它是控制图像边界向内偏移的。

what???这是嘛意思啊?根本看不懂!!!好的,我们先不要急,我们在看看:

基础知识:

当我们通过 border-image-source 引用边框图片后,border-image-slice属性会将图片分割为9个区域:四个角,四个边(edges)以及中心区域。四条切片线,从它们各自的侧面设置给定距离,控制区域的大小。
在这里插入图片描述
这感觉好像理解点了,用完border-image-slice属性之后就把这个图分成了九个部分。
我们在接着往下看:

上图说明了每个区域的位置。
区域 1-4 为角区域(corner region)。 每一个都用一次来形成最终边界图像的角点。(Each one is used a single time to form the corners of the final border image.)
区域 5-8 边区域(edge region)。在最终的边框图像中重复,缩放或修改它们以匹配元素的尺寸。(These are repeated, scaled, or otherwise modified in the final border image to match the dimensions of the element.)
区域 9 为中心区域( middle region)。它在默认情况下会被丢弃,但如果设置了关键字fill,则会将其用作背景图像。(It is discarded by default, but is used like a background image if the keyword fill is set.)
中间的区域将不会被边框使用,但当设置有 fill 关键词时将会被作为 background-image。这个关键词可以被设置在属性的任何一个位置(前面、后面或者两个值之间)

看完上面基础知识了我们再来了解一下他的参数:

参数可能值介绍:

在这里插入图片描述

参数:

/* 只有一个值的时候它控制所有的边 */
border-image-slice: 30%; 

/* 有俩个值的的时候它分别控制垂直方向 | 水平方向 */
border-image-slice: 10% 30%;

/* 有三个值的时候它分别控制 顶部 | 水平方向 | 底部 */
border-image-slice: 30 30% 45;

/* 四个值那就是对应 上 右 下 左 */
border-image-slice: 7 12 14 5; 

/* 使用fill(fill可以放在任意位置)那就开启了第九个九宫格 */
border-image-slice: 10% fill 7 12;

/* Global values */
border-image-slice: inherit;
border-image-slice: initial;
border-image-slice: unset;
登录后复制

具体使用:

我们先从最开始的百分之百开始看效果:
在这里插入图片描述
然后百分之七十:
在这里插入图片描述
百分之三十五:
在这里插入图片描述

小总结:

我们现在可以清楚的了解了,border-image-slice就是控制四个角的background-image-source的展示的。

但是现在朋友们肯定很好奇百分之三十五的情况下的那四个边的问题。
在这里插入图片描述
这四个边笔者单独说明一下,如果当border-image-slice小于百分之50的话就会拉伸伸满。然后我们在通过border-image-repeat属性控制他的填补状态的。
在这里插入图片描述

当然还是有一些比较懵的不理解的地方,欢迎大家在下面评论区讨论研究~

更多编程相关知识,请访问:编程教学!!

以上就是详细了解CSS3中的border-image-slice属性的详细内容,更多请关注php中文网其它相关文章!

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
来源:csdn网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号