div四个角显示框-阿里云开发者社区

div四个角显示框

2022-09-27 82

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 四个角显示框

div的四个角

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML><HEAD><TITLE> New Document </TITLE></HEAD><BODY><!-- 第一种方式 --><style>    .rect {   
    width: 100px; 
    height: 100px;
    border-radius:5px;
    background: linear-gradient(to left, #f00, #f00) left top no-repeat, 
          linear-gradient(to bottom, #f00, #f00) left top no-repeat, 
          linear-gradient(to left, #f00, #f00) right top no-repeat,
          linear-gradient(to bottom, #f00, #f00) right top no-repeat, 
          linear-gradient(to left, #f00, #f00) left bottom no-repeat,
          linear-gradient(to bottom, #f00, #f00) left bottom no-repeat,
          linear-gradient(to left, #f00, #f00) right bottom no-repeat,
          linear-gradient(to left, #f00, #f00) right bottom no-repeat;
    background-size: 5px 20px, 20px 5px, 5px 20px, 20px 5px; 
    background-color:#aaaaaa
  }
</style><divclass="rect"></div><br/><!-- 第二种方式 --><style>    .box {
        position: absolute;
      width: 100px;
      height: 100px;
      z-index:0;
      background:#eeeeee;
      overflow:hidden;
    }
    .box .box-top{
      position: absolute;
      top:0;
      width: 100%;
      height: 50%;
      z-index:1;
    }
    .box .box-top:before{
      position: absolute;
      top: 0;
      left: 0;
      content: '';
      display: block;
      height: 25%;
      width: 25%;
      border-left: 4px solid green;
      border-top: 4px solid green;
    }
    .box .box-top:after{
      position: absolute;
      top: 0;
      right: 0;
      content: '';
      display: block;
      height: 25%;
      width: 25%;
      border-right: 4px solid green;
      border-top: 4px solid green;
    }
    .box .box-upper{
      position: absolute;
      bottom:0;
      width: 100%;
      height: 50%;
      z-index:1;
    }
    .box .box-upper:before{
      position: absolute;
      bottom: 0;
      left: 0;
      content: '';
      display: block;
      height: 25%;
      width: 25%;
      border-left: 4px solid green;
      border-bottom: 4px solid green;
    }
    .box .box-upper:after{
      position: absolute;
      bottom: 0;
      right: 0;
      content: '';
      display: block;
      height: 25%;
      width: 25%;
      border-right: 4px solid green;
      border-bottom: 4px solid green;
    }
    .box .box-content{
      height: 100%;
      width: 100%;
      padding-top:40%;
      overflow:hidden;
      z-index:3;
      text-align:center;  
    }
</style><divclass="box"><divclass="box-top"></div><divclass="box-content">123</div><divclass="box-upper"></div></div></BODY></HTML>

div四个角显示框

热门文章

最新文章

相关电子书