CSS 之 border


【1】 border-width  、 outline  、 box-shadow  、text-shadow 。。。。不支持百分比

【2】 border-style 类型

solid —— 实线

dashed —— 虚线 : IE 下的宽高是2:1 ,而火狐和谷歌下的宽高比是3:1

dotted ——点线   : IE 下的点是小圆 ,谷歌和火狐下的点是小方

double —— 双线 

inset —— 内凹,outset ——外凹,ridge —— 山脊 :兼容性比较差,现在很少人使用

【3】border-color 与 color

border-color 的默认颜色就是color ,类似的还有 box-shadow 、text-shadow 、outline的默认颜色是color

【4】border 与 background

background-position 默认相对于左上方定位的;

要使相对于右下方定位的方式可以使用border : 

【5】 border 与三角等图形的构建





【6】 border : 0  与 border  :none ;

 border:0  ,  元素虽然在页面上看不见,但按border默认值理解,浏览器依然对border-width/border-color进行了渲染,即已经占用了内存值。
 border :none,浏览器解析“none”时将不作出渲染动作,即不会消耗内存值。



  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值