css 制作图片,CSS制作图形

最新推荐文章于 2023-07-15 15:06:46 发布

王若琳

最新推荐文章于 2023-07-15 15:06:46 发布

阅读量408

点赞数 1

文章标签： css 制作图片

气泡三角形

bVbm6Bl?w=452&h=256

利用 border 的 transparent 特性实现

.bubbly

.bubbly {

position: absolute;

top:50%;

left: 50%;

transform:translate(-50%,-50%);

background: #00aabb;

border-radius: .4em;

width: 260px;

padding: 60px 20px;

text-align: center;

color: white;

font-size: 200%;

}

.bubbly:after {

content: '';

position: absolute;

bottom: 0;

left: 50%;

border: 34px solid transparent;

border-top-color: #00aabb;

border-bottom: 0;

border-left: 0;

margin: 0 0 -34px -17px;

}

梯形

bVbm6BK?w=432&h=235

梯形

利用伪类加旋转透视实现

.trapezoid

.trapezoid{

position: absolute;

top:50%;

left: 50%;

transform:translate(-50%,-50%);

width: 160px;

padding: 60px;

text-align: center;

color: white;

font-size: 200%;

}

.trapezoid:before{

content:"";

position: absolute;

top: 0; right: 0; bottom: 0; left: 0;

transform:perspective(40px) scaleY(1.3) rotateX(5deg);

transform-origin: bottom;

background:deeppink;

z-index:-1;

}

爱心

bVbm6B0?w=272&h=178

#heart {

position: relative;

width: 100px;

height: 90px;

}

#heart:before,

#heart:after {

position: absolute;

content: "";

left: 50px;

top: 0;

width: 50px;

height: 80px;

background: red;

-moz-border-radius: 50px 50px 0 0;

border-radius: 50px 50px 0 0;

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

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

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

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

transform: rotate(-45deg);

-webkit-transform-origin: 0 100%;

-moz-transform-origin: 0 100%;

-ms-transform-origin: 0 100%;

-o-transform-origin: 0 100%;

transform-origin: 0 100%;

}

#heart:after {

left: 0;

-webkit-transform: rotate(45deg);

-moz-transform: rotate(45deg);

-ms-transform: rotate(45deg);

-o-transform: rotate(45deg);

transform: rotate(45deg);

-webkit-transform-origin: 100% 100%;

-moz-transform-origin: 100% 100%;

-ms-transform-origin: 100% 100%;

-o-transform-origin: 100% 100%;

transform-origin :100% 100%;

}

太极图

#yin-yang {

width: 96px;

height: 48px;

background: #eee;

border-color: red;

border-style: solid;

border-width: 2px 2px 50px 2px;

border-radius: 100%;

position: relative;

}

#yin-yang:before {

content: "";

position: absolute;

top: 50%;

left: 0;

background: #eee;

border: 18px solid red;

border-radius: 100%;

width: 12px;

height: 12px;

}

#yin-yang:after {

content: "";

position: absolute;

top: 50%;

left: 50%;

background: red;

border: 18px solid #eee;

border-radius:100%;

width: 12px;

height: 12px;

}

折角

bVbm6Cn?w=548&h=389

利用切角、伪类、渐变、旋转实现

.corner

.corner{

position: absolute;

top:50%;left: 50%;

transform:translate(-50%,-50%);

width: 120px;line-height:120px;

padding:40px;

text-align: center;

color: white;

font-size: 200%;

background:linear-gradient(-150deg,transparent 1.5em, yellowgreen 0);

border-radius:.5em;

}

.corner:before{

content: '';

position: absolute;

top: 0; right: 0;

background:

linear-gradient(to left bottom,transparent 50%, rgba(0,0,0,.2) 0, rgba(0,0,0,.4)) 100% 0 no-repeat;

width: 1.73em; height: 3em;

transform: translateY(-1.3em) rotate(-30deg);

transform-origin: bottom right;

border-bottom-left-radius: inherit;

box-shadow: -.2em .2em .3em -.1em rgba(0,0,0,.15);

}

混合模式背景图

bVbm6CO?w=576&h=350

利用渐变实现

.colorful-stripe

.colorful-stripe {

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

width: 300px;

line-height: 200px;

text-align: center;

color: #fff;

font-size: 200%;

border-radius: .5em;

background:

linear-gradient(limegreen, transparent), linear-gradient(90deg, skyblue, transparent), linear-gradient(-90deg, coral, transparent);

background-blend-mode: screen;

}

多云

bVbm6Dl?w=703&h=461

利用线性渐变、阴影、缩放实现

.cloudy

.cloudy{

position: absolute;

top: 50%;left: 50%;

width:200px;height:260px;

transform: translate(-50%, -50%);

text-align:center;

font-size:200%;

color:#fff;

background:#2EB5E5;

border-radius:5px;

}

.cloudy:before {

content: "";

text-indent:23px;

font-size:22px;

line-height:40px;

color:#333;

position: absolute;

height: 50px;width: 50px;

background: #FFFFFF;

left:30%;

top:45%;

transform: translate(-50%, -50%);

border-radius: 50%;

box-shadow:

#FFFFFF 65px -15px 0 -5px,

#FFFFFF 25px -25px,

#FFFFFF 30px 10px,

#FFFFFF 60px 15px 0 -10px,

#FFFFFF 85px 5px 0 -5px,

#C8C8C8 35px -35px,

#C8C8C8 66px -27px 0 -5px,

#C8C8C8 91px -10px 0 -8px;

animation: cloudy 5s ease-in-out infinite;

}

.cloudy:after{

content:"";

position: absolute;

top: 80%;left: 50%;

height: 15px;

width: 120px;

background:rgba(0,0,0,.5);

border-radius: 50%;

transform: translate(-50%, -50%);

animation: cloudy_shadow 5s ease-in-out infinite;

}

@keyframes cloudy {

50%{

transform: translate(-50%, -70%);

}

100%{

transform: translate(-50%, -50%);

}

@keyframes cloudy_shadow {

50%{

transform: translate(-50%, -50%) scale(0.8);

background:rgba(0,0,0,.2);

}

100%{

transform: translate(-50%, -50%) scale(1);

background:rgba(0,0,0,.5);

}

阴影实现多云天气图案

bVbm6DA?w=583&h=465

多云(cloudy2)(单标签实现)

利用线性渐变、阴影、缩放实现

.cloudy2

.cloudy2{

position: absolute;

top: 50%;left: 50%;

width:200px;height:260px;

transform: translate(-50%, -50%);

text-align:center;

font-size:200%;

color:#fff;

background:#2EB5E5;

border-radius:5px;

}

.cloudy2:before {

content: "";

text-indent:23px;

font-size:22px;

line-height:40px;

color:#333;

position: absolute;

height: 50px;width: 50px;

background: #FFFFFF;

left:30%;

top:55%;

transform: translate(-50%, -50%);

border-radius: 50%;

z-index:100;

box-shadow:

#FFFFFF 65px -15px 0 -5px,

#FFFFFF 25px -25px,

#FFFFFF 30px 10px,

#FFFFFF 60px 15px 0 -10px,

#FFFFFF 85px 5px 0 -5px;

animation: cloudy2 5s ease-in-out infinite;

}

.cloudy2:after{

content:"";

position: absolute;

top: 45%;left: 63%;

height: 60px;

width: 60px;

z-index:10;

background:linear-gradient(180deg,#FE9F38 0%, #F46635 100%);

border-radius: 50%;

transform: translate(-50%, -50%);

box-shadow: 0 0 10px 4px #FFA563;

animation: cloudy2 10s ease-in-out infinite;

}

@keyframes cloudy2 {

50%{

transform: translate(-50%, -70%);

}

100%{

transform: translate(-50%, -50%);

}

阴影实现雨天天气图案

bVbm6DL?w=658&h=464

雨(rainy)

利用线性渐变、阴影、缩放实现

.rainy

.rainy-container {

position: absolute;

top: 50%;

left: 50%;

width: 200px;

height: 260px;

transform: translate(-50%, -50%);

text-align: center;

font-size: 200%;

color: #fff;

background: #E6E6E6;

border-radius: 5px;

}

.rainy {

position: absolute;

width: 3px;

height: 6px;

top: 30%;

left: 50%;

background: #CCCCCC;

border-radius: 50%;

animation: rainy_rain .7s infinite linear;

}

.rainy:before {

content: "";

color: #333;

position: absolute;

height: 50px;

width: 50px;

top: 30px;

left: -40px;

background: #CCC;

transform: translate(-50%, -50%);

border-radius: 50%;

box-shadow: #CCC 65px -15px 0 -5px, #CCC 25px -25px, #CCC 30px 10px, #CCC 60px 15px 0 -10px, #CCC 85px 5px 0 -5px;

animation: cloudy 5s ease-in-out infinite;

}

.rainy:after {

content: "";

position: absolute;

top: 120px;

left: 50%;

height: 15px;

width: 120px;

background: rgba(0, 0, 0, .5);

border-radius: 50%;

transform: translate(-50%, -50%);

animation: cloudy_shadow 5s ease-in-out infinite;

}

@keyframes cloudy {

50% {

transform: translate(-50%, -70%);

}

100% {

transform: translate(-50%, -50%);

}

@keyframes cloudy_shadow {

50% {

transform: translate(-50%, -50%) scale(0.8);

background: rgba(0, 0, 0, .2);

}

100% {

transform: translate(-50%, -50%) scale(1);

background: rgba(0, 0, 0, .5);

}

@keyframes rainy_rain {

0% {

box-shadow: rgba(0, 0, 0, 0) -10px 30px, rgba(0, 0, 0, 0) 40px 40px, rgba(0, 0, 0, .3) -50px 75px, rgba(0, 0, 0, .3) 55px 50px, rgba(0, 0, 0, .3) -18px 100px, rgba(0, 0, 0, .3) 12px 95px, rgba(0, 0, 0, .3) -31px 45px, rgba(0, 0, 0, .3) 30px 35px;

}

25% {

box-shadow: rgba(0, 0, 0, .3) -10px 45px, rgba(0, 0, 0, .3) 40px 60px, rgba(0, 0, 0, .3) -50px 90px, rgba(0, 0, 0, .3) 55px 65px, rgba(0, 0, 0, 0) -18px 120px, rgba(0, 0, 0, 0) 12px 120px, rgba(0, 0, 0, .3) -31px 70px, rgba(0, 0, 0, .3) 30px 60px;

}

26% {

box-shadow: rgba(0, 0, 0, .3) -10px 45px, rgba(0, 0, 0, .3) 40px 60px, rgba(0, 0, 0, .3) -50px 90px, rgba(0, 0, 0, .3) 55px 65px, rgba(0, 0, 0, 0) -18px 40px, rgba(0, 0, 0, 0) 12px 20px, rgba(0, 0, 0, .3) -31px 70px, rgba(0, 0, 0, .3) 30px 60px;

}

50% {

box-shadow: rgba(0, 0, 0, .3) -10px 70px, rgba(0, 0, 0, .3) 40px 80px, rgba(0, 0, 0, 0) -50px 100px, rgba(0, 0, 0, .3) 55px 80px, rgba(0, 0, 0, .3) -18px 60px, rgba(0, 0, 0, .3) 12px 45px, rgba(0, 0, 0, .3) -31px 95px, rgba(0, 0, 0, .3) 30px 85px;

}

51% {

box-shadow: rgba(0, 0, 0, .3) -10px 70px, rgba(0, 0, 0, .3) 40px 80px, rgba(0, 0, 0, 0) -50px 45px, rgba(0, 0, 0, .3) 55px 80px, rgba(0, 0, 0, .3) -18px 60px, rgba(0, 0, 0, .3) 12px 45px, rgba(0, 0, 0, .3) -31px 95px, rgba(0, 0, 0, .3) 30px 85px;

}

75% {

box-shadow: rgba(0, 0, 0, .3) -10px 95px, rgba(0, 0, 0, .3) 40px 100px, rgba(0, 0, 0, .3) -50px 60px, rgba(0, 0, 0, 0) 55px 95px, rgba(0, 0, 0, .3) -18px 80px, rgba(0, 0, 0, .3) 12px 70px, rgba(0, 0, 0, 0) -31px 120px, rgba(0, 0, 0, 0) 30px 110px;

}

76% {

box-shadow: rgba(0, 0, 0, .3) -10px 95px, rgba(0, 0, 0, .3) 40px 100px, rgba(0, 0, 0, .3) -50px 60px, rgba(0, 0, 0, 0) 55px 35px, rgba(0, 0, 0, .3) -18px 80px, rgba(0, 0, 0, .3) 12px 70px, rgba(0, 0, 0, 0) -31px 25px, rgba(0, 0, 0, 0) 30px 15px;

}

100% {

box-shadow: rgba(0, 0, 0, 0) -10px 120px, rgba(0, 0, 0, 0) 40px 120px, rgba(0, 0, 0, .3) -50px 75px, rgba(0, 0, 0, .3) 55px 50px, rgba(0, 0, 0, .3) -18px 100px, rgba(0, 0, 0, .3) 12px 95px, rgba(0, 0, 0, .3) -31px 45px, rgba(0, 0, 0, .3) 30px 35px;

}

彩虹天气图案

bVbm6D6?w=628&h=453

彩虹(rainbow)

利用border、box-shadow 实现

.rainbow

.rainbow-container{

position: absolute;

top: 50%;left: 50%;

width:200px;height:260px;

transform: translate(-50%, -50%);

text-align:center;

font-size:200%;

color:#fff;

background:#F3D166;

border-radius:5px;

}

.rainbow{

position:absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

height: 1px;width: 1px;

}

.rainbow:before{

content:"";

position:absolute;

top: 50%;left: 50%;

transform: translate(-50%, -50%) rotate(45deg);

height: 70px;width: 70px;

border-radius: 100px 0 0 0;

box-shadow:

#F44336 -2px -2px 0 1px,

#FF9800 -4px -4px 0 3px,

#FFEB3B -6px -6px 0 5px,

#8BC34A -8px -8px 0 7px,

#00BCD4 -10px -10px 0 9px,

#2196F3 -12px -12px 0 11px,

#9C27B0 -14px -14px 0 13px;

animation: rainbow 5s ease-in-out infinite;

}

.rainbow:after{

content: "";

position: absolute;

top: 70px;

left: 50%;

height: 15px;

width: 120px;

background: rgba(0, 0, 0, .5);

border-radius: 50%;

transform: translate(-50%, -50%);

animation: cloudy_shadow 5s ease-in-out infinite;

}

@keyframes rainbow {

50% {

transform: translate(-50%, -55%) rotate(30deg);

}

100% {

transform: translate(-50%, -50%) rotate(45deg);

}

@keyframes cloudy_shadow {

50% {

transform: translate(-50%, -50%) scale(0.8);

background: rgba(0, 0, 0, .2);

}

100% {

transform: translate(-50%, -50%) scale(1);

background: rgba(0, 0, 0, .5);

}

雪天天气图案

bVbm6Eg?w=618&h=461

雪(snowy)

利用阴影实现

.snowy

.snowy-container {

position: absolute;

top: 50%;

left: 50%;

width: 200px;

height: 260px;

transform: translate(-50%, -50%);

text-align: center;

font-size: 200%;

color: #fff;

background: #607D8B;

border-radius: 5px;

}

.snowy {

position: absolute;

width: 4px;

height: 4px;

border-radius:50%;

top: 30%;

left: 50%;

background: #fff;

border-radius: 50%;

animation: snowy_rain 2s infinite linear;

}

.snowy:before {

content: "";

color: #333;

position: absolute;

height: 50px;

width: 50px;

top: 30px;

left: -40px;

background: #eee;

transform: translate(-50%, -50%);

border-radius: 50%;

box-shadow:

#eee 65px -15px 0 -5px,

#eee 25px -25px,

#eee 30px 10px,

#eee 60px 15px 0 -10px,

#eee 85px 5px 0 -5px;

animation: cloudy 5s ease-in-out infinite;

}

.snowy:after {

content: "";

position: absolute;

top: 120px;

left: 50%;

height: 15px;

width: 120px;

background: rgba(0, 0, 0, .5);

border-radius: 50%;

transform: translate(-50%, -50%);

animation: cloudy_shadow 5s ease-in-out infinite;

}

@keyframes cloudy {

50% {

transform: translate(-50%, -70%);

}

100% {

transform: translate(-50%, -50%);

}

@keyframes cloudy_shadow {

50% {

transform: translate(-50%, -50%) scale(0.8);

background: rgba(0, 0, 0, .2);

}

100% {

transform: translate(-50%, -50%) scale(1);

background: rgba(0, 0, 0, .5);

}

@keyframes snowy_rain {

0% {

box-shadow:

rgba(255, 255, 255, 0) -10px 30px,

rgba(255, 255, 255, 0) 40px 40px,

rgba(255, 255, 255, .6) -50px 75px,

rgba(255, 255, 255, .6) 55px 50px,

rgba(255, 255, 255, .6) -18px 100px,

rgba(255, 255, 255, .6) 12px 95px,

rgba(255, 255, 255, .6) -31px 45px,

rgba(255, 255, 255, .6) 30px 35px;

}

25% {

box-shadow:

rgba(255, 255, 255, .6) -10px 45px,

rgba(255, 255, 255, .6) 40px 60px,

rgba(255, 255, 255, .6) -50px 90px,

rgba(255, 255, 255, .6) 55px 65px,

rgba(255, 255, 255, 0) -18px 120px,

rgba(255, 255, 255, 0) 12px 120px,

rgba(255, 255, 255, .6) -31px 70px,

rgba(255, 255, 255, .6) 30px 60px;

}

26% {

box-shadow:

rgba(255, 255, 255, .6) -10px 45px,

rgba(255, 255, 255, .6) 40px 60px,

rgba(255, 255, 255, .6) -50px 90px,

rgba(255, 255, 255, .6) 55px 65px,

rgba(255, 255, 255, 0) -18px 40px,

rgba(255, 255, 255, 0) 12px 20px,

rgba(255, 255, 255, .6) -31px 70px,

rgba(255, 255, 255, .6) 30px 60px;

}

50% {

box-shadow:

rgba(255, 255, 255, .6) -10px 70px,

rgba(255, 255, 255, .6) 40px 80px,

rgba(255, 255, 255, 0) -50px 100px,

rgba(255, 255, 255, .6) 55px 80px,

rgba(255, 255, 255, .6) -18px 60px,

rgba(255, 255, 255, .6) 12px 45px,

rgba(255, 255, 255, .6) -31px 95px,

rgba(255, 255, 255, .6) 30px 85px;

}

51% {

box-shadow:

rgba(255, 255, 255, .6) -10px 70px,

rgba(255, 255, 255, .6) 40px 80px,

rgba(255, 255, 255, 0) -50px 45px,

rgba(255, 255, 255, .6) 55px 80px,

rgba(255, 255, 255, .6) -18px 60px,

rgba(255, 255, 255, .6) 12px 45px,

rgba(255, 255, 255, .6) -31px 95px,

rgba(255, 255, 255, .6) 30px 85px;

}

75% {

box-shadow:

rgba(255, 255, 255, .6) -10px 95px,

rgba(255, 255, 255, .6) 40px 100px,

rgba(255, 255, 255, .6) -50px 60px,

rgba(255, 255, 255, 0) 55px 95px,

rgba(255, 255, 255, .6) -18px 80px,

rgba(255, 255, 255, .6) 12px 70px,

rgba(255, 255, 255, 0) -31px 120px,

rgba(255, 255, 255, 0) 30px 110px;

}

76% {

box-shadow:

rgba(255, 255, 255, .6) -10px 95px,

rgba(255, 255, 255, .6) 40px 100px,

rgba(255, 255, 255, .6) -50px 60px,

rgba(255, 255, 255, 0) 55px 35px,

rgba(255, 255, 255, .6) -18px 80px,

rgba(255, 255, 255, .6) 12px 70px,

rgba(255, 255, 255, 0) -31px 25px,

rgba(255, 255, 255, 0) 30px 15px;

}

100% {

box-shadow:

rgba(255, 255, 255, 0) -10px 120px,

rgba(255, 255, 255, 0) 40px 120px,

rgba(255, 255, 255, .6) -50px 75px,

rgba(255, 255, 255, .6) 55px 50px,

rgba(255, 255, 255, .6) -18px 100px,

rgba(255, 255, 255, .6) 12px 95px,

rgba(255, 255, 255, .6) -31px 45px,

rgba(255, 255, 255, .6) 30px 35px;

}

chrome 浏览器图标

bVbm6EJ?w=602&h=394

Chrome(单标签实现)

利用渐变实现

.Chrome{

position: absolute;

top: 50%;left: 50%;

width: 180px;height: 180px;

transform: translate(-50%, -50%);

box-shadow:0 0px 4px #999,0 0 2px #ddd inset;

border-radius:50%;

background-image:

radial-gradient(#4FACF5 0%,#2196F3 28%, transparent 28%),

radial-gradient(#fff 33%, transparent 33%),

linear-gradient(-50deg,#FFEB3B 34%, transparent 34%),

linear-gradient(60deg,#4CAF50 33%, transparent 33%),

linear-gradient(180deg,#FF756B 0%, #F44336 30%, transparent 30%),

linear-gradient(-120deg,#FFEB3B 40%, transparent 40%),

linear-gradient(-60deg,#FFEB3B 30%, transparent 30%),

linear-gradient(0deg,#4CAF50 45%, transparent 45%),

linear-gradient(60deg,#4CAF50 30%, transparent 30%),

linear-gradient(120deg,#F44336 50%, transparent 50%),

linear-gradient(180deg,#F44336 30%, transparent 30%);

background-position:0 0;

}

IE 浏览器图标

bVbm6ES?w=655&h=406

IE(单标签实现)

利用渐变、多重阴影实现

.IE{

position: absolute;

top: 50%;left: 50%;

width:200px; height:200px;

transform: translate(-50%, -50%);

border-radius:50%;

/* box-shadow:1px 2px 1px #ddd; */

background-image:

radial-gradient(#fff 38%, transparent 38%),

radial-gradient(#09C 0%, #09C 100%);

}

.IE:before{

content: "";

width:285px;

height:122px;

background:none;

border-radius:100%;

position:absolute;

top:33px;

left:-45px;

margin:auto;

box-shadow:

inset 0 12px 0 13px #09c,

-35px -8px 0 -5px #fff;

transform: rotate(-35deg);

}

.IE:after {

content: "";

width: 120px;

height: 25px;

background: #09c;

position: absolute;

top: 80px;

left: 0;

right: 0;

margin: auto;

box-shadow: 50px 23px 0 -2px #fff

}

safari 浏览器图标

bVbm6EU?w=755&h=390

safari(单标签实现)

利用渐变、border、旋转实现

.safari{

position: absolute;

top: 50%;left: 50%;

width:200px; height:200px;

transform: translate(-50%, -50%);

border-radius:50%;

border:5px solid #E8E8E8;

box-shadow:

-1px 3px 1px 2px #999,

-1px 3px 1px 2px #999 inset;

background-image:

radial-gradient(transparent 30%,#fff 30%,#fff 34%, transparent 34%),

linear-gradient(rgba(255,255,255,.8) 100%, transparent 100%),

linear-gradient(#1DE3FF 0%, #1F52EF 100%);

background-size: 50% 50%,20px 2px,20px 2px,2px 20px,2px 20px,100%,100%;

background-repeat:no-repeat;

background-position:center center, 175px center,5px center,center 175px,center 5px,0 0;

}

.safari::before{

content:"";

position: absolute;

top: 10px;left: 50%;

border-radius:10px;

/* width:20px; height:80px; */

border-bottom:100px solid rgba(255,255,255,.9);

border-left:10px solid transparent;

border-right:10px solid transparent;

transform-origin:center 90px;

z-index:-1;

transform:translate(-50%, 0%) rotate(40deg);

}

.safari::after{

content:"";

position: absolute;

top: 10px;left: 50%;

border-radius:10px;

/* width:20px; height:80px; */

border-bottom:100px solid rgba(255,0,0,.9);

border-left:10px solid transparent;

border-right:10px solid transparent;

transform-origin:center 90px;

transform:translate(-50%, 0%) rotate(220deg);

}

.safari:hover::before{

transition:transform 1s;

transform:translate(-50%, 0%) rotate(70deg);

}

.safari:hover::after{

transition:transform 1s;

transform:translate(-50%, 0%) rotate(250deg);

}

王若琳

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css 制作图片,CSS制作图形

气泡三角形利用 border 的 transparent 特性实现.bubbly.bubbly {position: absolute;top:50%;left: 50%;transform:translate(-50%,-50%);background: #00aabb;border-radius: .4em;width: 260px;padding: 60px 20px;text-align:...
复制链接

扫一扫