Question

我是CSS的新手，我正在进行100天的代码挑战，以获得更好，更快的速度。当我尝试从图像中删除边框时遇到问题。

边框定位为相对，其余元素定位为绝对。当我尝试移除边框时，所有形状都会歪斜并堆积在中间。

有关如何解决此问题的任何想法？

目前，这是HTML：

<body>


<!--Begin Image-->



 <!--Invisible Box-->

  <div class="box">
<!--Begin Head-->
<div class="head">
  <!--Begin Eyeballs ~ Yellow-->
  <div class="right-eye">
    <div class="pupil"></div>
  </div>
  <div class="left-eye">
    <div class="pupil"></div>
  </div>
  <!--Begin Beak-->
  <div class="beak"></div>
  <!--Begin Face Shadows-->
  <div class="right-shadow"></div>
  <div class="left-shadow"></div> 
</div>
<!--Begin Body-->
<div class="body">
  <!--Begin Wings-->
  <div class="right-wing"></div>
  <div class="left-wing"></div>
</div>

这就是CSS

body {
background: #3E5C76; 
}

.box {
  position: relative;
  margin: auto;
  display: block;
  margin-top: 8%;
  width: 600px;
  height: 420px;
  border: solid white 3px; 
}

.head{
  position: absolute;
  height: 27%; 
  width: 30%; 
  margin-top: 8%; 
  margin-left: 35%; 
  background: #F1F3F0; 
  border-radius: 50% 50% 0 0; 
}

.left-eye {
  position: absolute;
  height: 30%; 
  width: 25%;
  border-radius: 0 0 50% 50%; 
  background: #F7D871; 
  margin-top: 10%; 
  margin-left: 20%; 
}

.right-eye{
  position: absolute; 
  height: 30%; 
  width: 25%;
  border-radius: 0 0 50% 50%; 
  margin-left: 52%;
  margin-top: 10%; 
  background: #F7D871; 
}

.pupil{
  position: absolute; 
  height: 92%; 
  width: 65%; 
  background: black; 
  border-radius: 0 0 50% 50%; 
  margin-top: 1%; 
  margin-left: 18%; 
}

.beak{
  position: absolute; 
  height: 20%; 
  width: 10%; 
  background: #CE6644;
  margin-top: 20%; 
  margin-left: 44%;
  background: #3F3F3F; 
  transform: rotate(180deg);
  -webkit-clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); 
}

.body{
  position: relative; 
  height: 37%; 
  width: 30%; 
  background: white; 
  margin: auto; 
  margin-top: 26%;
  border-radius: 0 0 100% 100%; 
}

Answer 1

绝对定位的元素将从DOM流中删除，其他任何元素都不知道绝对元素是否存在。

删除边框时，所有元素都会丢失对页面布局的参考。这些元素都会聚集在一起，因为他们不知道如何相对于彼此，只相对于他们最近的I need to know the proper ghostscript parameters to create the output file. I do not need it to be printed, I will get the file over the printer myself. I am presently using LPD but have CUPS installed, but not sure how they are relevant. I am using, taken from the HP support page:父母。

Answer 2

另一个答案指出，你的定位依赖于那个边界。一种解决方法是使用透明颜色更改边框的颜色作为您选择的颜色。

border: 1px solid rgb(0, 0, 0, 0);

删除边框时CSS图像会失真

2 个答案: