css中属于边位移属性

admin 轻心小站 关注 LV.19 运营
发表于前端技术学习版块 css,教程

CSS中有很多属性可以用来控制元素的位置和布局,其中有一类属性是用来控制边框的位置和大小,我们称它们为边位移属性。border-top-width border-right-width border-

CSS中有很多属性可以用来控制元素的位置和布局,其中有一类属性是用来控制边框的位置和大小,我们称它们为边位移属性。

border-top-width
border-right-width
border-bottom-width
border-left-width

border-top-style
border-right-style
border-bottom-style
border-left-style

border-top-color
border-right-color
border-bottom-color
border-left-color 

上面列出了常用的边位移属性,它们分别用来控制元素的上、右、下、左四个边框的宽度、样式和颜色。

比如,你可以这样使用这些属性:

div {
  border-top-width: 2px;
  border-right-width: 1px;
  border-bottom-width: 3px;
  border-left-width: 1px;

  border-top-style: dashed;
  border-right-style: solid;
  border-bottom-style: dotted;
  border-left-style: solid;

  border-top-color: red;
  border-right-color: blue;
  border-bottom-color: green;
  border-left-color: black;
} 

上面的代码会让一个

元素的上边框变成红色的虚线,右边框变成蓝色的实线,下边框变成绿色的点线,左边框变成黑色的实线。

注意,如果你只希望控制某些边框,可以只设置对应的属性,比如:

div {
  border-bottom-width: 3px;
  border-bottom-color: green;
  border-bottom-style: dotted;
} 

这样就只会让

元素的下边框变成绿色的点线,并保持原来的宽度(因为只设置了这一条边的属性)。

对于边位移属性的取值,一般来说有很多种选择,比如边框的样式可以是solid、dashed、dotted等等,颜色可以是具体的颜色名、RGB值、HEX值等等,具体可以参考CSS规范。

最后,需要注意的是,边位移属性并不属于CSS布局属性的范畴,它们只是用来控制元素边框的属性,不会影响元素的大小和位置。

文章说明:

本文原创发布于探乎站长论坛,未经许可,禁止转载。

题图来自Unsplash,基于CC0协议

该文观点仅代表作者本人,探乎站长论坛平台仅提供信息存储空间服务。

评论列表 评论
发布评论

评论: css中属于边位移属性

粉丝

0

关注

0

收藏

0

已有0次打赏