css学习笔记-border

来源:转载

border

  • 定义:元素外边距内就是元素的边框。元素的边框就是围绕元素内容和内边距的一条或者多条线。因此,元素的背景会在外边框边界处停止,因为背景不会延伸到外边距以内,而边框就在外边距内部。

每个方向的边框都有三个方向:

  • 宽度或者粗细
  • 样式或者外观
  • 颜色

边框宽度:


一般边框宽度的默认值为medium,大概2个像素,thin、medium、thick这些关键字不一定对应摸个特定的宽度,它们只是相对定义,根据规范,thick总是笔medium宽,medium则总是比thin宽。尽管如此,宽度也不一定能显示出来,因为边框的默认样式是none(样式为 hidden时边框也不会出现),如果一个边框没有样式,也就不会存在。

如果一个水杯是空的,你就不能把它描述为一个装着没有东西,杯子里确实有内容物时才能讨论被子内容物的高度。同样,只有当边框存在时才能讨论边框的宽度。

记住这一点就可以避免乍看上去样式能出现,但却忘了边框默认样式是none而最终导致边框无法出现而迷惑的情景,所以,如果你希望边框出现,就必须声明一个边框样式。


下面重点看看各种情况下的边框宽度

如下css代码:

.tri { width: 78px; height: 16px; border: 0; background-color: red; display: inline-block; }.tri-test { border-top: 50px solid lightsalmon; border-right: 50px solid lightseagreen; border-left: 50px solid lightskyblue; border-bottom: 50px solid lightslategray;}

效果如图:

效果和我们所想没有偏差,那我们把内容的宽高都变为0以后:

边框的宽度是不是感觉已经发生了变化?或者说还不明确边框的宽度是什么定义?
它们边框宽度都是50px,再看下图红色箭头

边框真正的宽度可以理解为上图中用红色箭头标记的路径。
这时就可以初步得出结论:它表示从内容区域边界径直往指定方向(top、left、right或者bottom)的距离。
当我们改变右边框的宽度为160px时

由图可见随着内容区域大小的变化,定义的边框宽度并没有发生变化,由此确定了边框宽度的定义。


那么这样的发现有什么实际用处呢?

  • 用css绘制各种样式的三角形
    在我们明确了边框宽度的定义后,更改边框的颜色和更改边框的数量可以实现如下效果:

    .tri-test { border-top: 80px solid lightsalmon; border-right: 80px solid transparent;}

.tri-test { border-top: 80px solid lightsalmon; border-right: 80px solid transparent; border-left: 80px solid transparent;}

.tri-test { border-right: 43px solid transparent; border-left: 151px solid transparent; border-bottom: 135px solid lightslategray;}

制作原理其实很简单,我们参照个基本的图形来制作三角形

比如说你想做个这个样子的三角形:

第一步;我们把这个三角形的底水平或者垂直放置

或者

第二步:将高平移至俩角处,并且将头部连接起来:

第三步: 到这一步就可以很清晰了,对比之前的基本图我们发现决定这个三角形的参数有下边框的宽度、左边框的宽度和右边框的宽度对应图上就是黄、绿、蓝色的线,将左边框和右边框的颜色调为透明,再做适当旋转即可。我的参数如下:

.tri-test { border-right: 50px solid transparent; border-left: 150px solid transparent; border-bottom: 50px solid lightpink; transform:rotate(310deg);}

到这里其实还可以将三角形组合起来再配上border-radius属性,比如这样:

.tri-test { border-top: 90px solid transparent; border-right: 90px solid #ffff00; border-left: 90px solid #ffff00; border-bottom: 90px solid #ffff00; border-radius: 90px; transform:rotate(90deg);}

.tri-test { border-top: 225px solid transparent; border-right: 225px solid transparent; border-left: 65px solid lightpink; border-bottom: 65px solid lightcoral; border-radius: 20px; transform:rotate(225deg);}

分享给朋友:
您可能感兴趣的文章:
随机阅读: