服务器之家
您的位置： 首页 编程语言 css

Css3实现四种渐变效果代码分享

100人浏览   2024-11-21 10:19:15

一、八卦图背景

代码：

background:

radial-gradient(circle at 50% 59%, #D2CAAB 3%, #364E27 4%, #364E27 11%, rgba(54,78,39,0) 12%, rgba(54,78,39,0)) 50px 0,

radial-gradient(circle at 50% 41%, #364E27 3%, #D2CAAB 4%, #D2CAAB 11%, rgba(210,202,171,0) 12%, rgba(210,202,171,0)) 50px 0,

radial-gradient(circle at 50% 59%, #D2CAAB 3%, #364E27 4%, #364E27 11%, rgba(54,78,39,0) 12%, rgba(54,78,39,0)) 0 50px,

radial-gradient(circle at 50% 41%, #364E27 3%, #D2CAAB 4%, #D2CAAB 11%, rgba(210,202,171,0) 12%, rgba(210,202,171,0)) 0 50px,

radial-gradient(circle at 100% 50%, #D2CAAB 16%, rgba(210,202,171,0) 17%),

radial-gradient(circle at 0% 50%, #364E27 16%, rgba(54,78,39,0) 17%),

radial-gradient(circle at 100% 50%, #D2CAAB 16%, rgba(210,202,171,0) 17%) 50px 50px,

radial-gradient(circle at 0% 50%, #364E27 16%, rgba(54,78,39,0) 17%) 50px 50px;

background-color:#63773F;

background-size:100px 100px;

二、墙砖效果

background-color: silver;

background-image: linear-gradient(335deg, #b00 23px, transparent 23px),

linear-gradient(155deg, #d00 23px, transparent 23px),

linear-gradient(335deg, #b00 23px, transparent 23px),

linear-gradient(155deg, #d00 23px, transparent 23px);

background-size: 58px 58px;

background-position: 0px 2px, 4px 35px, 29px 31px, 34px 6px;

三、千鸟格效果

background:

linear-gradient(-45deg, white 25%, transparent 25%, transparent 75%, black 75%, black) 0 0,

linear-gradient(-45deg, black 25%, transparent 25%, transparent 75%, white 75%, white) 1em 1em,

linear-gradient(45deg, black 17%, transparent 17%, transparent 25%, black 25%, black 36%, transparent 36%, transparent 64%, black 64%, black 75%, transparent 75%, transparent 83%, black 83%) 1em 1em;

background-color: white;

background-size: 2em 2em;

四、地板砖效果

background:

radial-gradient(circle farthest-side at 0% 50%,#fb1 23.5%,rgba(240,166,17,0) 0)21px 30px,

radial-gradient(circle farthest-side at 0% 50%,#B71 24%,rgba(240,166,17,0) 0)19px 30px,

linear-gradient(#fb1 14%,rgba(240,166,17,0) 0, rgba(240,166,17,0) 85%,#fb1 0)0 0,

linear-gradient(150deg,#fb1 24%,#B71 0,#B71 26%,rgba(240,166,17,0) 0,rgba(240,166,17,0) 74%,#B71 0,#B71 76%,#fb1 0)0 0,

linear-gradient(30deg,#fb1 24%,#B71 0,#B71 26%,rgba(240,166,17,0) 0,rgba(240,166,17,0) 74%,#B71 0,#B71 76%,#fb1 0)0 0,

linear-gradient(90deg,#B71 2%,#fb1 0,#fb1 98%,#B71 0%)0 0 #fb1;

background-size:40px 60px;

相关推荐