问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

前端css写出如图示的样式，四个角颜色以及div的线条

头像
guozi
    449
    新手上路，请多包涵

    image.png

    css前端
    阅读 4.9k
    4 个回答
    得票最新
    头像
    北堂棣
      6.6k94268
      ✓ 已被采纳

      css 实现矩形四个边角加粗的方法 参考这篇文章，稍加修改，实现效果如下：
      css 实现矩形四个边角加小外框
      sss.png

      代码如下：

      <!DOCTYPE html>
<html lang="en">

<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <style>
       body {
           display: flex;
           justify-content: center;
           flex-direction: column;
           align-items: center;
       }

       .main {
           position: relative;
           width: 300px;
           height: 100px; // 宽高可以随意调整 
           border: 1pxsolidrgb(0, 255, 242);
           border-radius: 8px;
       }

       .main span {
           position: absolute;
           padding: 15px;
           border-style: solid;
           border-color: rgb(114, 243, 237);
       }

       .main span:nth-child(1) {
           left: -15px;
           top: -15px;
           border-width: 5px 0 0 5px;
           border-top-left-radius: 8px;
       }

       .main span:nth-child(2) {
           right: -15px;
           top: -15px;
           border-width: 5px 5px 0 0;
           border-top-right-radius: 8px;
       }

       .main span:nth-child(3) {
           right: -15px;
           bottom: -15px;
           border-width: 0 5px 5px 0;
           border-bottom-right-radius: 8px;
       }

       .main span:nth-child(4) {
           left: -15px;
           bottom: -15px;
           border-width: 0 0 5px 5px;
           border-bottom-left-radius: 8px;
       }
   </style>
</head>

<body>
   <h1 style="color: red">css实现矩形边角加粗</h1>
   <div class="main">
       <span></span>
       <span></span>
       <span></span>
       <span></span>
   </div>

</body>

</html>
      头像
      蛋先生DX
        30715

        凑和着用吧，哈哈

        image.png

        <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style>
    body {
      background-color: black;
    }
    .wrap {
      border: 2px solid orange;
      border-radius: 4px;
      position: relative;
      width: 200px;
      height: 100px;
      padding: 8px;
    }
    .wrap__cover1 {
      position: absolute;
      top: -2px;
      bottom: -2px;
      width: 140px;
      background: black;
      left: calc(50% - 70px);
    }
    .wrap__cover2 {
      position: absolute;
      left: -2px;
      right: -2px;
      height: 40px;
      background: black;
      top: calc(50% - 20px);
    }
    .wrap__content {
      border: 1px solid orange;
      border-radius: 4px;
      width: 100%;
      height: 100%;
      position: relative;
      z-index: 100px;
    }
  </style>
  <body>
    <div class="wrap">
      <div class="wrap__cover1"></div>
      <div class="wrap__cover2"></div>
      <div class="wrap__content"></div>
    </div>
  </body>
</html>
        头像
        君迹我心
          5.1k41927

          配合伪元素，可以不添加额外的元素添加四角外框，不过没法实现圆角。
          代码：

                  <style>
            div{
                margin: 40px;
                border: solid 1px #2f89de;
                border-radius: 6px;
                height: 160px;
                width: 300px;

                position: relative;/*元素必须有定位，以方便伪元素相对于此元素定位*/
            }
            div:before,
            div::before{
                border-radius: 6px;

                content: '';
                position: absolute;/*必须使用绝对定位*/
                top: -36px;
                right: -36px;
                bottom: -36px;
                left: -36px;
                background: linear-gradient(to left, #196aa8, #196aa8) left top no-repeat,
                    linear-gradient(to bottom, #196aa8, #196aa8) left top no-repeat,
                    linear-gradient(to left, #196aa8, #196aa8) right top no-repeat,
                    linear-gradient(to bottom, #196aa8, #196aa8) right top no-repeat,
                    linear-gradient(to left, #196aa8, #196aa8) left bottom no-repeat,
                    linear-gradient(to bottom, #196aa8, #196aa8) left bottom no-repeat,
                    linear-gradient(to left, #196aa8, #196AA8) right bottom no-repeat,
                    linear-gradient(to left, #196aa8, #196aa8) right bottom no-repeat;
                background-size: 4px 36px, 36px 4px, 4px 36px, 36px 4px;
            }
        </style>

        <div></div>

          ——————————————————————————
          Refrence: CSDN「李晓怡」：css 四角边框；

          头像
          guozi
            449
            新手上路，请多包涵

            谢谢各位的指导，请问怎么封装为组件呢，我封装不成功

            查看全部 4 个回答
            推荐问题