zoukankan      html  css  js  c++  java
  • 关于border-color的一些小问题

    CSS边框:

    元素的边框 (border) 是围绕元素内容和内边距的一条或多条线。借用CSS border 属性允许我们规定元素边框的样式、宽度和颜色。
    CSS 规范指出,边框绘制在“元素的背景之上”。这很重要,因为有些边框是“间断的”(例如,点线边框或虚线框),元素的背景应当出现在边框的可见部分之间。
    CSS2 指出背景只延伸到内边距,而不是边框。后来 CSS2.1 进行了更正:元素的背景是内容、内边距和边框区的背景。大多数浏览器都遵循 CSS2.1 定义,不过一些较老的浏览器可能会有不同的表现。
    本篇博客中,主要浅谈border-color属性。
    而设置边框颜色非常简单。CSS 使用一个简单的 border-color 属性,它一次可以接受最多 4 个颜色值。
    可以使用任何类型的颜色值,例如可以是命名颜色,也可以是十六进制和 RGB 值:

    p {
      border-style: solid;
      border-color: green rgb(45%,30%,45%) #909090 aqua;
      }
    

    而这四个颜色,分别对应了border的上、右、下、左四个边框的颜色属性。

    那么如果我们没有给足四种颜色,浏览器会如何编译代码呢?
    border-color:red;

    显然,只给定一种颜色是,自然border的上下左右均为该色。
    border-color:red aqua;

    可见,最终结果上同下、左同右。
    那么我们只给定三种颜色呢?
    border-color: red #CD7425 aqua;

    我们可以发现,左边的颜色最终和右边的相同,而赋值颜色是顺序为上右下左,由此可见,当赋值颜色少于4时:
    颜色数量为一,则均为该色。
    颜色数目为二,上下为第一色,左右为第二色
    颜色数目为三,上下为指定色,左右均为右(也就是第二个颜色赋值)
    那我们总结一下其实就会发现:当未被赋值时,边框的颜色其实就是与其对称边的颜色。这也就解释了为什么赋予三种颜色时,左边框的颜色与右边而不是临近值(下边框)的颜色相同。同样的道理,当赋予两种颜色时,因为赋值的顺序为上右下左,所以上右为赋值颜色,下与上对称,所以颜色同上,而左,也自然同右。

  • 相关阅读:
    filp_open/filp_close/vfs_read/vfs_write
    memcpy一种实现方法
    memset函数的实现&printf函数几种输出格式的输出结果
    break退出循环分析
    定义指针变量作为返回值函数执行时报 段错误(核心已转储)
    node实现防盗链
    js实现输入密码之延迟星号和点击按钮显示或隐藏
    rem适配
    使用字蛛教程以及遇到的bug
    es6学习笔记-proxy对象
  • 原文地址:https://www.cnblogs.com/kangna/p/12211574.html
Copyright © 2011-2022 走看看