Question

我有CSS信封作为元素。我想增加50像素的高度和宽度。我更改了CSS属性，但它无法正常工作。现在我如何增加元素高度和宽度？

＆＃13;

#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);
        }

＆＃13;

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

＆＃13;

的jsfiddle：

https://jsfiddle.net/0L37kehb

Answer 1

更新了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;}
    }

Answer 2

为此您只需编辑#envelope的css，更改宽度：350px; 和高度：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>

Answer 3

检查此代码段

＆＃13;

#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;}
}

＆＃13;

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

＆＃13;

希望有所帮助

CSS更改元素高度和宽度

3 个答案: