html中引用名言标签,CSS3 培根名人名言引用全屏居中样式设计

CSS

语言：

CSSSCSS

确定

@charset "UTF-8";

@import url(https://fonts.googleapis.com/css?family=EB+Garamond|Droid+Serif|Playfair+Display|Open+Sans+Condensed:300);

*,

*:after,

*:before {

box-sizing: border-box;

}

html,

body {

font-family: 'EB Garamond';

font-size: 32px;

line-height: 1.4rem;

height: 100%;

padding: 0.5rem;

text-rendering: optimizeLegibility;

-moz-osx-font-smoothing: auto;

-webkit-font-smoothing: antialiased;

font-smoothing: antialiased;

-webkit-font-kerning: normal;

font-kerning: normal;

color: #1a222f;

background: #f4fff3;

}

p {

line-height: 1.4em;

}

.quote {

position: relative;

letter-spacing: 0.03em;

margin-bottom: 0.5rem;

}

.quote:before {

content: "“";

position: absolute;

left: -0.7em;

}

.quote:after {

content: "”";

margin-right: -1rem;

}

.quote--container {

margin: 4.5rem auto 0;

width: 17em;

border-bottom: 2px dotted #c6d1bf;

padding-bottom: 0.5rem;

}

.quote--highlight {

color: #d24335;

}

.quote--author {

font-family: 'Open Sans Condensed';

font-size: 0.8rem;

text-align: right;

font-weight: 300;

}