border

一、border-width不支持百分比

边框不会因为设备大就增大,css中类似的还有:outline,box-shadow,text-shadow,...

二、支持关键字

thin:1px

medium:默认值 , 3px  (border-style:double 至少3px才有效果)

thick:5px

三、类型

border-style:solid 实线

border-style:dashed;虚线

border-style:dotted:点线

border-style:double:双线

border-style:inset 内凹

可以利用点线实现IE7、8下的圆形

.dotted{ border:150px dotted red}

可以利用双线来实现类似三大杠图标

{width:120px;height:20px;border-top:60px double;border-bottom:20px solid}

四、border-color and color

border-color默认颜色 就是color

精彩案例:hover与图形变色,只要一个color hover变化,就可以一起变色。

五、border 与三角等图形构建

.triangle{ border-width:12px;border-style:solid;border-color:red red red transparent}

因为
.triangle{width:100px;height:100px;border:100px solid;border-color:red green blue orange}


.triangle{width:100px;height:0px;border:0px solid;border-color:red green blue orange}








评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值