html中圆形阴影,CSS3 圆形物体的斜向渐变阴影

CSS

语言：

CSSSCSS

确定

* {

box-sizing: border-box;

}

body {

font-family: "Avenir", sans-serif;

font-size: 40px;

background-color: #a3a3a3;

background-image: -webkit-linear-gradient(left, #e8e8e8 5px, #f4f4f4 5px);

background-image: linear-gradient(to right, #e8e8e8 5px, #f4f4f4 5px);

background-size: 10px 100%;

}

.tilt-shadow {

position: relative;

}

.tilt-shadow:before {

position: absolute;

z-index: -1;

left: -125%;

top: 75%;

content: '';

width: 200%;

height: 100%;

background-image: -webkit-linear-gradient(right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 100%);

background-image: linear-gradient(to left, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 100%);

-webkit-transform: rotate(-45deg);

transform: rotate(-45deg);

}

.circle {

height: 120px;

width: 120px;

border-radius: 100%;

background-color: #f3f3f3;

text-align: center;

padding-top: 42px;

border: 1px solid orange;

margin: 60px auto;

}