每日一坑：如何限制border高度？

元晖

已于 2022-02-22 13:55:53 修改

阅读量3.8k

点赞数 5

分类专栏：每天一个小bug 文章标签： css css3 html

于 2022-02-22 11:43:47 首次发布

本文链接：https://blog.csdn.net/weixin_43806705/article/details/123064194

版权

每天一个小bug 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

众所周知border是有宽度参数的，那有没有高度的参数呢？

很抱歉，我找了挺久都发现没有这个参数。

我解决思路是利用伪元素after来解决这个问题。

那当我遇到了需要设置高度的border咋办？

我的解决办法的思路如下（以下图宽高500px的div想在右边框加条10px宽 300px高的边框为例）：

如图所示
代码如下

<html>
<head>
    <title>test</title>
    <style>
        body {
            background:bisque;
        }
        div {
            background: aqua;
            width: 500px;
            height: 500px;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

给父元素设置相对定位
（原因：因为我需要伪元素通过父元素进行绝对定位）

div {
      background: aqua;
      width: 500px;
      height: 500px;
      position: relative; /* 添加在这 */
    }

添加伪元素绝对定位到父元素右侧

div:after {
	         content: ''; /* 莫得东西，边框嘛，不需要内容 */
	         display: block;
	         width: 10px;
	         height: 300px;
	         position: absolute;
	         top: 100px;
	         right: -10px;  /* 为什么是-10px? 因为我边框宽就是10px啊，我要移到父元素外边 */
	         background: #FFFFFF;
        }