div的四个角
<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>
