div只有四个角有边框实现

2019-03-09  本文已影响0人  且须文雅
<div class="rect"></div>

.rect {
    position: absolute; 
    top: 20px;
    left: 20px; 
    width: 100px; 
    height: 100px; 
    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: 1px 20px, 20px 1px, 1px 20px, 20px 1px;  
}
上一篇下一篇

猜你喜欢

热点阅读