径向渐变加阴影html,CSS3 图片径向渐变阴影效果

CSS

语言：

CSSSCSS

确定

body {

background: #222;

}

div#brooklyn-bridge {

width: 60%;

margin: 0 auto;

background-image: -webkit-radial-gradient(ellipse closest-side, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.6)), url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/brooklyn-bridge.jpg);

background-image: radial-gradient(ellipse closest-side, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.6)), url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/brooklyn-bridge.jpg);

box-shadow: inset 0 0 80px black;

background-size: contain;

padding-top: 39%;

background-repeat: no-repeat;

}

@media (-webkit-min-device-pixel-ratio: 2),

(min-resolution: 192dpi) {

div#brooklyn-bridge {

background-image: -webkit-radial-gradient(ellipse closest-side, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.6)), url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/brooklyn-bridge-2x.jpg);

background-image: radial-gradient(ellipse closest-side, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.6)), url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/brooklyn-bridge-2x.jpg);

}

}