你真的了解border属性吗?

先来一波常规QAQ吧

新手入门级别都是先画一亩三分地,打下一个带有宽高的江山图,看下面

代码如下:简单 低调 奢华 有效果

没错,这就是我们常规操作,5个像素的边框宽度大小,solide实线边框样式,black黑色边框颜色

再来一波非常规的操作

不需要奢华 只需要简单 以及更低调的操作

代码如下:


快看,这是什么操作

没有边框打下,也没有颜色,这不符合逻辑呀,那~结果为啥子是这样的?

哦~我是谁~我在哪里~我干了什么~为什么是这个情况

深度解析

其实,这一切的一切都是有原因的,因为这里暗含操作border:medium solid black;

medium 代表边框的默认宽度,这里默认是多少呢?大家不妨先猜一猜

solide 就不说了 

black 默认边框颜色,为什么又是默认黑色呢?再猜一下

问题一:border:3px;只是它可以生效么?


然而丝毫没有动摇

问题二:border:black;只是它可以生效么?


骗子,都是骗子,这两个没有效果、、、

问题三:为什么是三个像素,为什么是黑色?

到了放大招的时候了:

一顿操作猛如虎呀,这是、、、
两条线,俗称双线?嗯~

现在明白了么?这里的双线每一根的大小是一个像素,中间间隔在一个像素,加起来就是三个像素啦,为了更好的和实线呼应,实线就是三个像素啦^v^

你以为这就完了么,这个大招是持续性的:

走~

这个颜色,怎么绿了,不是字体颜色么?现在明白了么?

边框颜色默认渲染字体颜色,字体颜色默认渲染是黑色的,所以这里就理所当然的渲染过来啦。

欢迎同学们跟我一起深入探讨你所不知道的前端哦,赶紧加入我们吧

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1.块级元素和行内元素 块级(block-level)元素;行内(内联、inline-level)元素。 块元素的...
    饥人谷_小侯阅读 2,048评论 1 4
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 27,736评论 1 45
  • 第一章 F12: element.style 内联样式(可以直接在上面写代码进行简单调试) user agent...
    fastwe阅读 1,554评论 0 0
  • Head First HTML与CSS 第九章 盒模型 CSS——掌控页面的表现 今天,我们要对某一段落文字利用C...
    一个非典型IT学习者阅读 317评论 0 0
  • 浏览器与服务器的基本概念 浏览器(安装在电脑里面的一个软件) 作用: ①将网页内容渲染呈现给用户查看。 ②让用户通...
    云还灬阅读 1,158评论 0 0