边框的这种效果是怎么实现的啊

Answer 1

css &nbsp;.rect&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;position:&nbsp;absolute; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;top:&nbsp;20px;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;left:&nbsp;20px; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width:&nbsp;100px; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;height:&nbsp;100px; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text-align:&nbsp;center; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;line-height:&nbsp;100px; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;background:&nbsp;linear-gradient(to&nbsp;left,&nbsp;#f00,&nbsp;#f00)&nbsp;left&nbsp;top&nbsp;no-repeat, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;linear-gradient(to&nbsp;bottom,&nbsp;#f00,&nbsp;#f00)&nbsp;left&nbsp;top&nbsp;no-repeat, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;linear-gradient(to&nbsp;left,&nbsp;#f00,&nbsp;#f00)&nbsp;right&nbsp;top&nbsp;no-repeat, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;linear-gradient(to&nbsp;bottom,&nbsp;#f00,&nbsp;#f00)&nbsp;right&nbsp;top&nbsp;no-repeat, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;linear-gradient(to&nbsp;left,&nbsp;#f00,&nbsp;#f00)&nbsp;left&nbsp;bottom&nbsp;no-repeat, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;linear-gradient(to&nbsp;bottom,&nbsp;#f00,&nbsp;#f00)&nbsp;left&nbsp;bottom&nbsp;no-repeat, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;linear-gradient(to&nbsp;left,&nbsp;#f00,&nbsp;#f00)&nbsp;right&nbsp;bottom&nbsp;no-repeat, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;linear-gradient(to&nbsp;left,&nbsp;#f00,&nbsp;#f00)&nbsp;right&nbsp;bottom&nbsp;no-repeat; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;background-size:&nbsp;1px&nbsp;20px,&nbsp;20px&nbsp;1px,&nbsp;1px&nbsp;20px,&nbsp;20px&nbsp;1px; &nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp; html &nbsp;&nbsp;<div&nbsp;class="rect">游戏首页</div>