CSS更改元素高度和宽度

问题描述：

我将CSS信封作为元素。我想增加元素的50像素高度和宽度。我改变了CSS属性，但它不起作用。现在如何增加元素高度和宽度？CSS更改元素高度和宽度

#envelope { 
 
      background: #F66B40; 
 
      width: 300px; 
 
      height: 200px; 
 
      position: absolute; 
 
      left: 50%; 
 
      top: 40%; 
 
      margin-left: -150px; 
 
      border-bottom-left-radius: 20px; 
 
      border-bottom-right-radius: 20px; 
 
      box-shadow: 10px 10px 10px rgba(0,0,0,0.5); 
 
     } 
 

 
     #lid { 
 
      position: relative; 
 
      top: -150px; 
 
      width: 0px; 
 
      height: 0px; 
 
      border-style: solid; 
 
      border-width: 0 150px 150px 150px; 
 
      border-color: transparent transparent #F66B40 transparent; 
 

 
     } 
 

 
     #letter { 
 
      position: relative; 
 
      background: #f6f6f6; 
 
      padding-top:5px; 
 
      padding-left: :5px; 
 
      padding-right:5px; 
 
      top: -150px; 
 
      width: 280px; 
 
      height: 200px; 
 
      left: 10px; 
 
      top: -220px; 
 
      animation: out 5s infinite linear; 
 
      box-shadow: 2px 2px 5px rgba(0,0,0,0.5); 
 
     }

<div id="envelope"> 
 
    <div id="lid"></div> 
 
    <div id="letter"></div> 
 
    <div id="left-corner"></div> 
 
    <div id="right-corner"></div> 
 
</div>

的jsfiddle：

https://jsfiddle.net/0L37kehb

你想要增加高度和宽度的信封的哪个元素 – Geeky

@rubash哪个元素？plz更具体？ –

我想增加CSS信封的高度和宽度 –

答

更新CSS

#envelope { 
     background: #F66B40; 
     width: 350px; 
     height: 250px; 
     position: absolute; 
     left: 50%; 
     top: 40%; 
     margin-left: -150px; 
     border-bottom-left-radius: 20px; 
     border-bottom-right-radius: 20px; 
     box-shadow: 10px 10px 10px rgba(0,0,0,0.5); 
    } 

    #lid { 
     position: relative; 
     top: -150px; 
     width: 0px; 
     height: 0px; 
     border-style: solid; 
     border-width: 0 175px 150px 175px; 
     border-color: transparent transparent #F66B40 transparent; 

    } 

    #letter { 
     position: relative; 
     background: #f6f6f6; 
     padding-top:5px; 
     padding-left: :5px; 
     padding-right:5px; 
     top: -150px; 
     width: 330px; 
     height: 250px; 
     left: 10px; 
     top: -220px; 
     animation: out 5s infinite linear; 
     box-shadow: 2px 2px 5px rgba(0,0,0,0.5); 
    } 

    #left-corner { 
     position: relative; 
     top: -315px; 
     left: 10px; 
     width: 0px; 
     height: 0px; 
     border-style: solid; 
     border-width: 150px 0 0 300px; 
     border-color: transparent transparent transparent #F66B40; 

    } 

    #right-corner { 
     position: relative; 
     top: -470px; 
     left: 50px; 
     width: 0px; 
    height: 0px; 
    border-style: solid; 
    border-width: 0 0 150px 300px; 
    border-color: transparent transparent #F66B40 transparent; 
    } 

    @keyframes out { 
     0% {top: -220px;} 
     25% {top: -200px;} 
     50% {top: -220px;} 
     75% {top: -200px;} 
    }

感谢兄弟现在工作 –

答

为您只需编辑#envelope的CSS，改变宽度：350像素;和height：250px;

#envelope { 
 
      background: #F66B40; 
 
      width: 350px; 
 
      height: 250px; 
 
      position: absolute; 
 
      left: 50%; 
 
      top: 40%; 
 
      margin-left: -150px; 
 
      border-bottom-left-radius: 20px; 
 
      border-bottom-right-radius: 20px; 
 
      box-shadow: 10px 10px 10px rgba(0,0,0,0.5); 
 
     } 
 

 
     #lid { 
 
     position: relative; 
 
    top: -150px; 
 
    width: 0px; 
 
    height: 0px; 
 
    border-style: solid; 
 
    border-width: 0 163px 150px 187px; 
 
    border-color: transparent transparent #F66B40 transparent; 
 

 
     } 
 

 
     #letter { 
 
      position: relative; 
 
    background: #f6f6f6; 
 
    padding-top: 5px; 
 
    padding-left: :5px; 
 
    padding-right: 5px; 
 
    top: -150px; 
 
    width: 306px; 
 
    height: 224px; 
 
    left: 19px; 
 
    top: -220px; 
 
    animation: out 5s infinite linear; 
 
    box-shadow: 2px 2px 5px rgba(0,0,0,0.5); 
 

 
     }

<div id="envelope"> 
 
    <div id="lid"></div> 
 
    <div id="letter"></div> 
 
    <div id="left-corner"></div> 
 
    <div id="right-corner"></div> 
 
</div>

兄弟它不增加完整信封的大小。它只是增加了#envelope的宽度，而不是#lid #letter＃左角＃右角，我想增加所有4个ID的大小。 –

@RushabhShah现在检查 –

答

检查这个片段

#envelope { 
 
    background: #F66B40; 
 
    width: 350px; 
 
    height: 300px; 
 
    position: absolute; 
 
    left: 50%; 
 
    top: 40%; 
 
    margin-left: -150px; 
 
    border-bottom-left-radius: 20px; 
 
    border-bottom-right-radius: 20px; 
 
    box-shadow: 10px 10px 10px rgba(0,0,0,0.5); 
 
} 
 
#lid { 
 
    position: relative; 
 
    top: -150px; 
 
    width: 50px; 
 
    height: 0px; 
 
    border-style: solid; 
 
    border-width: 0px 150px 150px 150px; 
 
    border-color: transparent transparent #F66B40 transparent; 
 
} 
 
#letter { 
 
    position: relative; 
 
    background: #f6f6f6; 
 
    padding-top: 5px; 
 
    padding-left: :5px; 
 
    padding-right: 5px; 
 
    top: -150px; 
 
    width: 330px; 
 
    height: 300px; 
 
    left: 10px; 
 
    top: -220px; 
 
    animation: out 5s infinite linear; 
 
    box-shadow: 2px 2px 5px rgba(0,0,0,0.5); 
 
} 
 

 
#left-corner { 
 
    position: relative; 
 
    top: -315px; 
 
    left: 10px; 
 
    width: 0px; 
 
    height: 0px; 
 
    border-style: solid; 
 
    border-width: 150px 0 0 250px; 
 
    border-color: transparent transparent transparent #F66B40; 
 
} 
 
#right-corner { 
 
    position: relative; 
 
    top: -470px; 
 
    left: 50px; 
 
    width: 0px; 
 
    height: 0px; 
 
    border-style: solid; 
 
    border-width: 0 0 150px 300px; 
 
    border-color: transparent transparent #F66B40 transparent; 
 
} 
 

 
@keyframes out { 
 
    0% {top: -220px;} 
 
    25% {top: -200px;} 
 
    50% {top: -220px;} 
 
    75% {top: -200px;} 
 
}

<div id="envelope"> 
 
    <div id="lid"></div> 
 
    <div id="letter"></div> 
 
    <div id="left-corner"></div> 
 
    <div id="right-corner"></div> 
 
</div>

希望它有帮助

CSS更改元素高度和宽度

相关推荐