CSS3边框背景

边框背景——border-image

边框背景主要是用来给元素边框添加背景图像,本质是用一张图片来修饰边框背景,看下图效果:

    -------------------------->>

用左边图片来完成右边的效果;

先看一下边框背景的参数:border-image:image  boeder-width(参数可写1-4个)图片填充方式stretch/repeat/round);

border-image有这样一个功能,它是用来把一张背景图片切割成九个部分的,分四刀切,就是border-width对应的四个参数;

第一刀是从上往下切


第二刀是从右往左切


第三刀是从下往上切


第四刀是从左往右切


最终将这个图片切为九个图,其中四个角落的图片会放到你要修饰的边框的四个角落,其余四条边的背景将会用中间浅色的图片来填充,填充方式有stretch/repeat/round三种;

当border-width只给一个参数的时候表示四个切割宽度均为所给值

;当给两个参数时,第一个表示上下,第二个表示左右;

当给3个参数时,第一个表示上,第二个表示左右,第三个表示下。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值