CSS3 of Border

Border相关

calc(50% - 盒宽/高度一半)内部必须有空格,可用于计算并设置left,top值,就不用再设置margin-top/left
border-radius=下面四个值
border-top-left-radius:(这里面也可以有水平方向和垂直方向值)
border-top-right-radius:
border-bottom-right-radius:
border-bottom-left-radius:

box-shadow
第一个参数可以填inset(内阴影)默认是outset(外阴影)
不填阴影类型的话,第一个参数是水平偏移量,第二个是垂直,第三个是模糊值(基于边框原来位置向两边同时模糊,即变淡),第四个是传播距离(水平垂直四个方向同时增大),最后阴影颜色
可传多个值,box-shadow:0px 0px 10px #fff,inset 0px 0px 10px #fff,…(根据z轴显示先设置在上面)
颜色值相同会继续叠加颜色深度
文字在阴影的上面,背景颜色在阴影的下面

border-image
border-image-source:url()/linear-gradient(red,yellow) 可传背景图片(配合slice使用,不然slice默认就是100%)或者渐变色
border-image-slice:数值/百分比,fill 截取,fill代表填充内容区
border-image-outset 向外延伸
border-image-width 默认为1 设置border内显示图片的背景宽度 传auto是将slice的值加px作为值,1是相对于border-width的1倍
border-image-repeat:stretch(默认 拉伸)/round平均平铺,满足一半宽度或者宽度的时候压缩加一个/repeat平铺/space中间有空格区域的平铺,满足一半以后再压缩加一个 中间部分填充样式,可传横向和垂直的两个样式

整体显示
border-image : source slice repeat (width和outset要单独设置)

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值