CSS深入理解学习笔记之border

1、border-width

  border-width为何不支持百分比:语义和使用场景决定的,现实中各种边框本身的概念就不存在百分比的使用方法。

  border-width支持关键字:thin、medium(默认)、thick,其大小分别是1px、3px、5px(IE7除外)。

  border-width默认值为何是medium(3px):因为border-style为double的情况下至少要3px才能看出效果。

2、border-style

  border-style为dashed的一些有趣数据:

  border-style为dotted的浏览器差异:

  IE的圆点效果可以用来实现IE7/8下的圆角效果。

  border-style为double的计算规则:两边边框永远相等,中间间隔±1。

  border-style为double实现三等分图标:

3、border-color

  border-color与color的关系:border-color默认与color值相同,类似的还有box-shadow、text-shadow等。

4、border与三角等图形构建

利用border的solid风格,可以巧妙的实现三角的构建:

  也可以通过拼接的方法,上下两个小梯形,形成圆角的效果:

5、border与透明边框

  透明边框的功用:

  • 增加点击区域。
  • 增加可视渲染区域。

 6、border在布局中的应用

   border实现等高布局(border大小不能为百分比,所以左侧是固定宽度的):

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Android干货

安卓开发_浅谈Android动画(四)

1676
来自专栏腾讯NEXT学位

我不知道你知不知道但前端NEXT知道的伪元素小技巧

3337
来自专栏柠檬先生

css3 动画应用 animations 和transtions transform在加上JavaScript 可以实现硬件加速动画。

transitions(过渡) 被应用于元素指定的属性变化时,该属性经过一段时间逐渐的过渡到最终想要的值。   主要包括四个属性:     执行变换的属性:...

20610
来自专栏前端知识分享

第10天:CSS初始化操作

       在写页面过程中,每个浏览器都会有默认样式,为了避免浏览器的样式兼容问题,我们会在样式开始部分对常用标签进行重置样式。这样我们在写样式时,就不会有误...

832
来自专栏LIN_ZONE

css 中 zoom和transform:scale的区别(转载)

还在几年前,zoom还只是IE浏览器自己私有的玩具,但是,现在,除了FireFox浏览器,其他,尤其Chrome和移动端浏览器已经很好支持zoom属性了:

553
来自专栏前端架构

【CSS深入】设置不同块级流方向时的属性百分比计算

百分比在屏幕自适应是我们常用,但是很多时候某个CSS属性的百分比计算值,并非如我们所想象的那样子。前段时间有位同学分享了一篇关于margin/padding自适...

392
来自专栏三流程序员的挣扎

Android 动画总结(3) - 补间动画

Tween Animation 包括、ScaleAnimation、TranslateAnimation、RotateAnimation 以及这四种动画的组合 ...

581
来自专栏全沾开发(huā)

总结CSS3新特性(Transform篇)

总结CSS3新特性(Transform篇) 概述: CSS3新添加的Transform可以改变元素在可视化区域的坐标(这种改变不会引起...

3207
来自专栏老马寒门IT

10-移动端开发教程-移动端事件

在前端的移动Web开发中,有一部分事件只在移动端产生,如触摸相关的事件。接下来给大家简单总结一下移动端的事件。

2048
来自专栏一“技”之长

Android开发中基础动画技巧的应用 原

        我是先入门iOS的移动开发者,提到动画开发,iOS开发者很容易联想到3种方式,UIImageView的帧动画,UIView层的属性动画和Core...

632

扫描关注云+社区