如何实现div只有四个角有边框

css3 可以用 background 实现,如下:

.test{
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 5px, 5px 1px, 1px 5px, 5px 1px;
}

你可能感兴趣的:(如何实现div只有四个角有边框)