• 技术文章 >web前端 >前端问答

    css3怎么实现花边边框

    青灯夜游青灯夜游2022-09-16 19:11:31原创190

    在css中,可以利用border-image属性来实现花边边框。border-image属性可以使用图片来创建边框,即给边框加上背景图片,只需要将背景图片指定为花边样式即可;语法“border-image: url(图片路径) 向内偏移值 图像边界宽度 outset 是否重复;”。

    大前端零基础入门到就业:进入学习

    本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。

    在css中,可以利用border-image属性来实现花边边框。

    css border-image属性

    border-image属性可以使用图片来创建边框,即给边框加上背景图片。没错,就是平常那一小小条的边框,也能加图片。

    border-image是一个简写属性:

    省略的值设置为它们的默认值。

    1、border-image-source: url()

    设置边框图片的路径

    2、border-image-slice: 100 100 100 100 fill

    用以指定从哪 4 个位置分割图像(遵循上右下左的顺序)。

    参数可以填 5个, 前1~4 个参数 是按照线的位置分割,按照 上 右 下 左的顺序进行分割, 值的设置跟其他值的缩写方式一样, 提供 2个 值 就是 上下 和 左右, 提供1个值 就设置4条线的位置。 注意 只能填数字, 百分比, 不能加上px。 100 就等于 100px

    那么到底是怎么分割法的呢,看下面的图片详解,看起来可能有点乱, 认真看,还是看得懂的呢。 蓝色数字 9 ,是内容区。 如果不填上第五个参数 fill, 是会空白的。

    3、border-image-width: 1

    设置边框图片的宽度。 可以设置 数字, 和 px, 数字的话是几倍的意思。 1的话, 就是 1 * border-width, 也可以设置auto。 auto的计算方式是,取 border-image-slice 的值,然后加上 px 如果border-image-slice 的值为 100, 那么取过来, 加上 px 就是 100px。

    4、border-image-outset: 100px 100px 100px 100px

    在原来的基础上, 上 右 下 左 扩大100px , 可以简写。 也可以设置数字, 数字也一样。是几倍的意思。 1 代表 1倍 也就是 1* border-width(100) = 100px

    5、border-image-repeat:

    参数:stretch  repeat  round  space

    按照什么方式来 平铺。 可以填 两个参数, 一个参数, 代表 四个方向的平铺一样。 两个参数,第一个值 代表 水平方向,第二个值代表 垂直方向。

    网上截图,截的不好, 所以有中间那个小红点,忽略它就好。 这个方法,兼容情况不是很好,一般没有特殊情况,不会去设置它的。

    最后,简写方式:

    只能填,三个参数。 slice 和repeat 是可以填多个值的。

    border-image: url(./img/Snipaste_2019-07-16_16-39-16.png) 100 space;                
    /* 简写: 三个参数  source  slice  repeat */

    (学习视频分享:css视频教程web前端

    以上就是css3怎么实现花边边框的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:css CSS3
    上一篇:实现css文字前留白属性有哪些 下一篇:javascript中什么是内存
    VIP课程(WEB全栈开发)

    相关文章推荐

    • ❤️‍🔥共22门课程,总价3725元,会员免费学• 巧用 CSS混合模式 让文字智能适配背景颜色• CSS技巧分享:纯CSS实现表格响应式布局• 如何写出优雅耐看的css代码?css命名小技巧分享!• 总结分享几个借助 CSS 来更好的控制定时器的方法• css怎么实现给元素块加阴影的效果
    1/1

    PHP中文网