两种风格的Quote的CSS

Determine that the thing can and shall be done, and then we shall find the way.

Abraham Lincoln

Determine that the thing can and shall be done, and then we shall find the way.

Abraham Lincoln

HTML:

  <blockquote>
    <p>
      Determine that the thing can and shall be done,
      and then we shall find the way.
    </p>
    <cite>Abraham Lincoln</cite>
  </blockquote>
          

风格1CSS 

  #example1 {
    padding-bottom: 50px;
  }
          
  #example1 > blockquote {
    margin-left: 50px;
    padding: 5px;
    position: relative;
    width: 400px;
    border: 0px;
  }
          
  #example1 > blockquote:after,
  #example1 > blockquote:before {
    position: absolute;
    z-index: 1;
    font-size: 12em;
    color: #2ABBD5;
    text-shadow: 2px 2px 0 #DDD;
    font-family: serif;
    height: 0;
  }
          
  #example1 > blockquote:before {
    content: "\201C";
    top: -80px;
    left: -40px;
  }
          
  #example1 > blockquote:after {
    content: "\201D";
    bottom: 80px;
    right: -40px;
  }
          
  #example1 > blockquote p {
    font-size: 2.0em;
    margin: 5px;
    z-index: 10;
    position: relative;
  }
          
  #example1 > blockquote > cite {
    color: #AAA;
    display: block;
    font-size: 1.2em;
    text-align: right;
    position: absolute;
    right: 0px;
    z-index: 10;
  }
          
  #example1 > blockquote > cite:before {
    content: "-- ";
  }
          

风格2CSS 

  #example2 {
    padding-bottom: 50px;
  }
          
  #example2 blockquote {
    background-color: #FAF205;
    background-image: -webkit-linear-gradient(top, #FAF205 20%, #FFFC9C 100%);
    background-image: linear-gradient(#FAF205 20%, #FFFC9C 100%);
    border-radius: 20px;
    padding: 15px 30px;
    position: relative;
    margin: 0;
    width: 400px;
    border: 0px;
  }
          
  #example2 blockquote p {
    font-size: 1.8em;
    margin: 5px;
    position: relative;
    z-index: 10;
  }
          
  #example2 blockquote > cite {
    bottom: -70px;
    left: 50px;
    display: block;
    font-size: 1.1em;
    position: absolute;
  }
          
  #example2 blockquote:after {
    border-color: transparent #FFFC9C;
    border-style: solid;
    border-width: 0 15px 50px 0px;
    content: "";
    display: block;
    bottom: -50px;
    left: 40px;
    position: absolute;
    width: 0;
    z-index: 1;
  }