html文字阴影效果图,CSS3 10种纯CSS生成的文字阴影效果

CSS

语言：

CSSSCSS

确定

body {

margin: 0;

color: white;

background: black;

font-size: 10pt;

text-align: center;

font-family: sans-serif;

}

h1 {

margin: 2em 0;

font-size: 200%;

}

h2 {

display:inline-block;

font-size: 400%;

margin: 0.5em 1em;

}

/* Invisible Text Shadow */

.invisible {

color: black;

font-family: 'Raleway', sans-serif;

text-shadow: white .04em .04em 0;

}

/* Outline Text Shadow */

.outline {

color: black;

font-family: 'Arbutus', sans-serif;

text-shadow: white .02em 0 0, white 0 .02em 0, white -.02em 0 0, white 0 -.02em 0;

}

/* Offset Text Shadow */

.offset {

font-family: 'Sarina', sans-serif;

text-shadow: black .05em .05em 0, white .08em .08em 0;

}

/* Fade Text Shadow */

.fade {

font-family: 'Press Start 2P', sans-serif;

text-shadow: rgba(255, 255, 255, .5) .02em .02em, rgba(255, 255, 255, .4) .04em .04em, rgba(255, 255, 255, .3) .06em .06em, rgba(255, 255, 255, .2) .08em .08em, rgba(255, 255, 255, .1) .1em .1em;

}

/* Diagonal Text Shadow */

.diagonal {

font-family: 'Limelight', cursive;

color: black;

text-shadow: white -.02em 0 0, white -.06em -.02em 0, white -.1em -.03em 0, white -.14em -.06em 0, white .02em .02em 0;

}

/* Cross Text Shadow */

.cross {

font-family: 'Open Sans', sans-serif;

color: black;

text-shadow: white .02em -.02em 0, white .04em -.04em 0, white .06em -.06em 0, white .08em -.08em 0, white .1em -.1em 0, white -.02em .02em 0, white -.04em .04em 0, white -.06em .06em 0, white -.08em .08em 0, white -.1em .1em 0;

}

/* Ransom Text Shadow */

.ransom:first-letter {

background: black;

padding: 0 .1em;

text-shadow: rgba(255, 255, 255, .3) .04em -.04em 0, rgba(255, 255, 255, .7) 0 0 0, black .02em .02em 0, rgba(255, 255, 255, .7) .02em .04em 0;

}

.ransom {

font-family: 'Libre Baskerville', serif;

background: white;

color: transparent;

text-shadow: rgba(0, 0, 0, .5) .04em -.04em 0, rgba(0, 0, 0, .7) 0 0 0, white .02em .02em 0, rgba(0, 0, 0, .3) .02em .04em 0;

}

/* Fuzzy Text Shadow */

.fuzzy {

font-family: 'Anton', sans-serif;

color: transparent;

text-shadow: white 0 0 .1em;

}

/* Underline Text Shadow */

.underline {

font-family: 'Catamaran', sans-serif;

margin: 0;

display: inline-block;

position: relative;

}

.underline:after {

content: '';

position: absolute;

display: block;

height: .35em;

width: 120%;

margin-left: -60%;

left: 50%;

bottom: -.35em;

border-radius: 50%;

z-index: -1;

background: black;

}

.underline:before {

content: '';

position: absolute;

display: block;

height: .3em;

width: 110%;

margin-left: -55%;

left: 50%;

bottom: -.22em;

border-radius: 50%;

z-index: -2;

background: white;

background: linear-gradient(to right, white 25%, black 100%);

}

/* Stripe Text Shadow */

.stripe {

font-family: 'Teko', sans-serif;

color: black;

text-shadow: white .02em 0 0, white 0 .02em 0, white -.02em 0 0, white 0 -.02em 0, black .06em 0 0, black .06em .06em 0, black 0 .06em 0, black -.06em .06em 0, black -.06em 0 0, black -.06em -.06em 0, black 0 -.06em 0, black .06em -.06em 0, white .08em 0 0, white .08em .08em 0, white 0 .08em 0, white -.08em .08em 0, white -.08em 0 0, white -.08em -.08em 0, white 0 -.08em 0, white .08em -.08em 0;

}