文章/答案/技术大牛

发布

社区首页 >问答首页 >可以删除两个边框之间的线条

问可以删除两个边框之间的线条
EN

Stack Overflow用户

提问于 2021-11-03 10:22:34

回答 2查看 72关注 0票数 0

已将Windows 95克隆窗口添加到我的个人网站。在该图中，您可以看到有两个div，一个在顶部(div.title)，另一个在底部(div.body)。底部的div在左侧、底部和右侧都有边框(顶部没有边框)。顶部的div在整个元素周围有一个边框。我遇到的问题是两个边界相交处的分界线。有没有一种方法可以移除这条线，让两个边框在交汇处看起来都是无缝的？

* {
  margin: 0;
}

body {
  background-color: #008284;
  font-family: "Poppins", sans-serif;
  color: white;
  text-align: center;
  background-image: url("desktop.jpg");
  background-repeat: no-repeat;
}

@font-face {
  font-family: Poppins;
  src: url(Poppins-Bold.ttf);
}

h1 {
  font-size: 6em;
}

h3 {
  margin-bottom: 20px;
}

a {
  font-size: 1.5em;
  color: white;
  text-decoration: none;
}

span {
  font-size: 1.5em;
}

.githubLogo {
  margin-top: 20px;
}


/*windows 95 window css */

button:focus {
  outline: none;
}

.box {
  width: 500px;
  background: #008284;
  position: absolute;
  top: 50%;
  left: 49%;
  transform: translate(-50%, -50%);
}

div.title {
  height: 18px;
  width: 100%;
  background: #000080;
  color: #fff;
  border: 3px #bec2c1 solid;
}

img.title {
  float: left;
}

p.title {
  margin: 2px 0 0 1px;
  float: left;
  font-family: Tahoma;
  font-weight: bold;
  font-size: 11px;
}

.title button {
  margin: 2px 2px 2px 0;
  float: right;
  width: 20px;
  height: 13.5px;
  background: #c0c0c0;
  border-width: 1px;
  border-color: #ffffff #808080 #808080 #ffffff;
  padding: 0;
  font-size: 9px;
  font-weight: bold;
  font-family: Tahoma;
  text-align: center;
}

div.body {
  padding: 13px 12px 12px;
  height: 100%;
  width: calc(100% - 34px);
  display: inline-block;
  border-bottom: 8px #bec2c1 solid;
  border-left: 8px #bec2c1 solid;
  border-right: 8px #bec2c1 solid;
}

div.body p {
  font-family: "MS Sans Serif";
  font-size: 11px;
}

div.body button {
  font-family: "MS Sans Serif";
  font-size: 11px;
  outline: 1px solid #000000;
  background: #c0c0c0;
  border-width: 1px;
  border-style: solid;
  border-color: #ffffff #808080 #808080 #ffffff;
  padding: 4px 10px;
  margin: 20px auto 3px;
  display: block;
  position: relative;
  bottom: 0px;
}

<div class="box">
  <div class="title">
    <p class="title">Home</p>
    <button>X</button>
  </div>
  <div class="body">
    <div>
      <div>
        <h1></h1>
        <h3></h3>
      </div>
      <div></div>
    </div>
  </div>
</div>

html

css

回答 2

Stack Overflow用户

回答已采纳

发布于 2021-11-10 12:38:12

* {
  margin: 0;
}

body {
  background-color: #008284;
  font-family: "Poppins", sans-serif;
  color: white;
  text-align: center;
  background-image: url("desktop.jpg");
  background-repeat: no-repeat;
}

@font-face {
  font-family: Poppins;
  src: url(Poppins-Bold.ttf);
}

h1 {
  font-size: 6em;
}

h3 {
  margin-bottom: 20px;
}

a {
  font-size: 1.5em;
  color: white;
  text-decoration: none;
}

span {
  font-size: 1.5em;
}

.githubLogo {
  margin-top: 20px;
}


/*windows 95 window css */

button:focus {
  outline: none;
}

.box {
  width: 500px;
  background: #008284;
  position: absolute;
  top: 50%;
  left: 49%;
  transform: translate(-50%, -50%);
}

div.title {
  height: 18px;
  width: 100%;
  background: #000080;
  color: #fff;
  border: 3px #bec2c1 solid;
}

img.title {
  float: left;
}

p.title {
  margin: 2px 0 0 1px;
  float: left;
  font-family: Tahoma;
  font-weight: bold;
  font-size: 11px;
}

.title button {
  margin: 2px 2px 2px 0;
  float: right;
  width: 20px;
  height: 13.5px;
  background: #c0c0c0;
  border-width: 1px;
  border-color: #ffffff #808080 #808080 #ffffff;
  padding: 0;
  font-size: 9px;
  font-weight: bold;
  font-family: Tahoma;
  text-align: center;
}

div.body {
  padding: 13px 12px 12px;
  height: 100%;
  width: calc(100% - 34px);
  display: inline-block;
  border-bottom: 8px #bec2c1 solid;
  border-left: 8px #bec2c1 solid;
  border-right: 8px #bec2c1 solid;
  margin-top:-1px;
}

div.body p {
  font-family: "MS Sans Serif";
  font-size: 11px;
}

div.body button {
  font-family: "MS Sans Serif";
  font-size: 11px;
  outline: 1px solid #000000;
  background: #c0c0c0;
  border-width: 1px;
  border-style: solid;
  border-color: #ffffff #808080 #808080 #ffffff;
  padding: 4px 10px;
  margin: 20px auto 3px;
  display: block;
  position: relative;
  bottom: 0px;
}

<div class="box">
  <div class="title">
    <p class="title">Home</p>
    <button>X</button>
  </div>
  <div class="body">
    <div>
      <div>
        <h1></h1>
        <h3></h3>
      </div>
      <div></div>
    </div>
  </div>
</div>

票数 1

Stack Overflow用户

发布于 2021-11-10 11:33:37

问题是转换属性。删除变换，并使用flexbox将div居中，而不是解析视觉边框。

HTML：

 <body>
    <div class="containerDiv">
      <div class="box">
        <div class="title">
          <p class="title">Home</p>
          <button>X</button>
        </div>
        <div class="body">
          <div>
            <div><h1>paul phillips</h1><h3>full stack web developer</h3></div>
            <a href="projects.html">projects</a>
            <span> | </span>
            <a href="paul_phillips_cv.pdf" target="_blank">curriculum vitae</a>
            <span> | </span>
            <a href="contact.html">contact</a>
            <div>
              <a href="https://github.com/" target="_blank"
                ><img class="githubLogo" src="images/GitHub-Mark-Light-64px.png" alt="GitHub Logo"
              /></a>
            </div>
          </div>
      </div>
    </div>
    </div>
  </body>

CSS：

* {
  margin: 0;
}

html,
body {
  background-color: #008284;
  font-family: "Poppins", sans-serif;
  color: white;
  text-align: center;
  background-image: url("desktop.jpg");
  background-repeat: no-repeat;
  height: 100%;
}

.containerDiv {
  display: flex;
  align-items: center;
  height: 100%;
  justify-content: center;
}

h1 {
  font-size: 6em;
}

h3 {
  margin-bottom: 20px;
}

a {
  font-size: 1.5em;
  color: white;
  text-decoration: none;
}

span {
  font-size: 1.5em;
}

.githubLogo {
  margin-top: 20px;
}

/*windows 95 window css */
button:focus {
  outline: none;
}

.box {
  width: 700px;
  background: #008284;
}

div.title {
  height: 18px;
  width: 100%;
  background: #000080;
  color: #fff;
  border: 3px #bec2c1 solid;
}

img.title {
  float: left;
}

p.title {
  margin: -4px 0 0 4px;
  float: left;
  font-family: "Win95Bold";
  font-size: 0.8em;
  letter-spacing: 1px;
}

.title button {
  margin: 2px 2px 2px 0;
  float: right;
  width: 20px;
  height: 13.5px;
  background: #c0c0c0;
  border-width: 1px;
  border-color: #ffffff #808080 #808080 #ffffff;
  padding: 0;
  font-size: 12px;
  font-family: "Win95";
  text-align: center;
}

div.body {
  padding: 13px 12px 12px;
  width: calc(100% - 32px);
  border-bottom: 7px #bec2c1 solid;
  border-left: 7px #bec2c1 solid;
  border-right: 7px #bec2c1 solid;
}

div.body p {
  font-family: "Poppins";
  font-size: 11px;
}

div.body button {
  font-family: "Win95";
  font-size: 11px;
  outline: 1px solid #000000;
  background: #c0c0c0;
  border-width: 1px;
  border-style: solid;
  border-color: #ffffff #808080 #808080 #ffffff;
  padding: 4px 10px;
  margin: 20px auto 3px;
  display: block;
  position: relative;
  bottom: 0px;
}

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/69823193

复制

相似问题

问可以删除两个边框之间的线条
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问可以删除两个边框之间的线条EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问可以删除两个边框之间的线条
EN