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

最新推荐文章于 2022-03-17 10:38:20 发布

转载最新推荐文章于 2022-03-17 10:38:20 发布 · 185 阅读

文章标签：

#径向渐变加阴影html

这段CSS代码展示了如何为div元素（id为brooklyn-bridge）设置一个渐变背景，并结合背景图片实现响应式布局。背景图片在高分辨率设备上会使用高清版本。同时，代码中还应用了内阴影效果、背景大小调整和防止重复显示。

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

}