<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>茶道历史</title> <link rel="stylesheet" type="text/css" href="css/style-1.css"> <link rel="stylesheet" type="text/css" href="css/style-2.css"> <style type="text/css"> #article-container{ width:100%; height: 1000px; box-sizing: border-box; background-color: #4295F4; } .article-content{ width: 1500px; height: 250px; margin: 0 auto; background-color:#DDC1C1; margin-top: 30px; } .article-content:hover{ border:10px solid black; } </style></head> <body> <div id="article-container"> <div class="article-content"> 这里是内容 </div> <div class="article-content"> 这里是内容 </div> <div class="article-content"> 这里是内容 </div> </div> </body></html>解决方案
你可以用outline或是box-shadow去模拟边框，这样就不会影响到原本定位，或是你用负margin或position:relative+left+top改变定位抵消掉border效果。
另外hover不是伪类。
补充:
可以在一开始布局时就有10px的border，不过是透明的或是和底色一致，然后hover只是变色。