首页 > html > border > Effect - 如何使用两个div创建具有不同宽度的双边框

Effect - 如何使用两个div创建具有不同宽度的双边框

border 【border】
我们想知道如何使用两个div创建具有不同宽度的双边框。
代码展示 运行结果 

<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
#top {
  width: 940px;
  float: left;
  border-bottom: 5px solid #222;
  border-top: 5px solid #222;
  padding-top: 1px;
  margin-bottom: 20px;
  padding-bottom: 1px;
}

#hwrap {
  width: 940px;
  float: left;
  border-bottom: 1px solid #222;
  border-top: 1px solid #222;
  padding-top: 20px;
  margin-bottom: 0px;
  padding-bottom: 14px;
}
</style>
</head>
<body>
  <div id="top">
    <div id="hwrap"></div>
  </div>
</body>
</html>