zoukankan      html  css  js  c++  java
  • css 四个角

    <style>
        .outter {
          position: relative;
          padding: 5px;
          height: 50px; 
           300px;
        }
        .outter::before {
          position: absolute;
          content: '';
          height: 10px;
           10px;
          right: 0;
          top: 0;
          border-right: 1px solid #00E8FF;
          border-top: 1px solid #00E8FF;
        }
        .outter::after {
            position: absolute;
            content: '';
            height: 10px;
             10px;
            left: 0;
            bottom: 0;
            border-left: 1px solid #00E8FF;
            border-bottom: 1px solid #00E8FF;
        }
        .content {
            position: relative;
            height: 50px;
        }
        .content::before {
          position: absolute;
          content: '';
          height: 10px;
           10px;
            left: -5px;
            top: -5px;
            border-left: 1px solid #00E8FF;
            border-top: 1px solid #00E8FF;
        }
        .content::after {
          position: absolute;
          content: '';
          height: 10px;
           10px;
            right: -5px;
            bottom: 5px;
            border-right: 1px solid #00E8FF;
            border-bottom: 1px solid #00E8FF;
        }
       
      </style>
     
     
    <div class="outter">
          <div class="content">

          </div>
          
      </div>
  • 相关阅读:
    JavaScript排序算法——快速排序
    JavaScript排序算法——归并排序
    JavaScript排序算法——堆排序
    JavaScript排序算法——插入排序
    ubuntu sublime text3 lisence
    jQuery学习笔记——弹出对话框
    CSS学习笔记——响应式布局
    CSS学习笔记——选择器
    JavaScript学习笔记——事件
    JavaScript学习笔记——节点
  • 原文地址:https://www.cnblogs.com/zjpzjp/p/13093643.html
Copyright © 2011-2022 走看看