Css 制作div四角边框效果

最新推荐文章于 2023-05-09 09:23:52 发布

@codeDo

最新推荐文章于 2023-05-09 09:23:52 发布

阅读量2.5k

点赞数 1

分类专栏： css

本文链接：https://blog.csdn.net/qq_33505829/article/details/100160126

版权

css 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

<li class="inputStyle">
    <span></span>
     <span></span>
     <span></span>
     <span></span>
</li>

inputStyle{
& span:nth-child(1) {
          position: absolute;
          left: 0px;
          top: 0px;
          padding: 9px;
          border-style: solid;
          border-color: #01e0fb;
          border-width: 1px 0 0 1px;
        }
        & span:nth-child(2) {
          position: absolute;
          right: 0;
          top: 0;
          padding: 9px;
          border-style: solid;
          border-color: #01e0fb;
          border-width: 1px 1px 0 0;
        }
        & span:nth-child(3) {
          position: absolute;
          right: 0;
          bottom: 0;
          padding: 9px;
          border-style: solid;
          border-color: #01e0fb;
          border-width: 0 1px 1px 0;
        }
        & span:nth-child(4) {
          position: absolute;
          left: 0;
          bottom: 0;
          padding: 9px;
          border-style: solid;
          border-color: #01e0fb;
          border-width: 0 0 1px 1px;
        }
}