多彩渐变色 CSS 样式速查

pimgeek2023年07月10日 16:14

学习者的数字花园渐变背景色

/* 标题栏背景 */
background: #cfff55;
background: -moz-linear-gradient(-36deg, #cfff55 25%, #e0ff94 80%, #ffffc9 100%);
background: -webkit-linear-gradient(-36deg, #cfff55 25%, #e0ff94 80%, #ffffc9 100%);
background: linear-gradient(-36deg, #cfff55 25%, #e0ff94 80%, #ffffc9 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cfff55', endColorstr='#ffffc9', GradientType=0 );

/* 笔记卡片主体背景 */
background: #ffface;
background: -moz-linear-gradient(156deg, #ffface 0%, #fffcdd 4%, #fffeeb 8%, #fffff5 16%, #ffffff 100%);
background: -webkit-linear-gradient(156deg, #ffface 0%, #fffcdd 4%, #fffeeb 8%, #fffff5 16%, #ffffff 100%);
background: linear-gradient(156deg, #ffface 0%, #fffcdd 4%, #fffeeb 8%, #fffff5 16%, #ffffff 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffface', endColorstr='#ffffff', GradientType=0 );

/* 反向链接视图背景 */
background: #fff5ad;
background: -moz-linear-gradient(156deg, #fff5ad 0%, #fff7b2 4%, #fffac1 8%, #ffffdd 16%, #ffffff 100%);
background: -webkit-linear-gradient(156deg, #fff5ad 0%, #fff7b2 4%, #fffac1 8%, #ffffdd 16%, #ffffff 100%);
background: linear-gradient(156deg, #fff5ad 0%, #fff7b2 4%, #fffac1 8%, #ffffdd 16%, #ffffff 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fff5ad', endColorstr='#ffffff', GradientType=0 );

实际效果展示:

 

 

 

姆明谷怀旧渐变背景色

/* 标题栏背景 */
background: #4fc0e2;
background: -moz-linear-gradient(-36deg, #4fc0e2 36%, #bee8f4 81%, #ebf2f4 100%);
background: -webkit-linear-gradient(-36deg, #4fc0e2 36%, #bee8f4 81%, #ebf2f4 100%);
background: linear-gradient(-36deg, #4fc0e2 36%, #bee8f4 81%, #ebf2f4 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4fc0e2', endColorstr='#ebf2f4', GradientType=1 );

/* 笔记卡片主体背景 */
background: #f2e6c6;
background: -moz-linear-gradient(156deg, #f2e6c6 0%, #fcf4e0 16%, #fffdf4 32%, #ffffff 48%);
background: -webkit-linear-gradient(156deg, #f2e6c6 0%, #fcf4e0 16%, #fffdf4 32%, #ffffff 48%);
background: linear-gradient(156deg, #f2e6c6 0%, #fcf4e0 16%, #fffdf4 32%, #ffffff 48%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2e6c6', endColorstr='#ffffff', GradientType=0 );

/* 反向链接视图背景 */
background: #e8c586;
background: -moz-linear-gradient(156deg, #e8c586 0%, #f9e6ac 20%, #f9f3de 50%, #fcfcfc 90%);
background: -webkit-linear-gradient(156deg, #e8c586 0%, #f9e6ac 20%, #f9f3de 50%, #fcfcfc 90%);
background: linear-gradient(156deg, #e8c586 0%, #f9e6ac 20%, #f9f3de 50%, #fcfcfc 90%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e8c586', endColorstr='#fcfcfc', GradientType=0 );

实际效果展示:

 

 

 





创建日期: 2023年06月15日 17:33