css3 可以用 background 实现,如下: .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; } <div class="rect"></div> 其实我觉得还不如用 border-image 实现来得简单,不过 border-image 要切图,