CSS标题样式分享一(渐变) 教程

love2wind 2022-9-16

1425 0

渐变背景标题

h2 {
  padding: 1rem 2rem;
  color: #fff;
  background-image: -webkit-gradient(linear, left top, right top, from(#fa709a), to(#fee140));
  background-image: -webkit-linear-gradient(left, #fa709a 0%, #fee140 100%);
  background-image: linear-gradient(to right, #fa709a 0%, #fee140 100%);
}

圆角渐变背景标题

h2 {
  padding: 1rem 2rem;
  color: #fff;
  border-radius: 10px;
  background-image: -webkit-gradient(linear, left top, right top, from(#f83600), to(#f9d423));
  background-image: -webkit-linear-gradient(left, #f83600 0%, #f9d423 100%);
  background-image: linear-gradient(to right, #f83600 0%, #f9d423 100%);
}

圆角渐变背景标题

h2 {
  padding: 1rem 2rem;
  color: #fff;
  border-radius: 10px;
  background-image: -webkit-gradient(linear, left top, right top, from(#f83600), to(#f9d423));
  background-image: -webkit-linear-gradient(left, #f83600 0%, #f9d423 100%);
  background-image: linear-gradient(to right, #f83600 0%, #f9d423 100%);
}

大圆角渐变背景标题

h2 {
  padding: 1rem 3rem;
  color: #fff;
  border-radius: 100vh;
  background-image: -webkit-gradient(linear, right top, left top, from(#9be15d), to(#00e3ae));
  background-image: -webkit-linear-gradient(right, #9be15d 0%, #00e3ae 100%);
  background-image: linear-gradient(to left, #9be15d 0%, #00e3ae 100%);
}

倾斜渐变背景标题

h2 {
  padding: 1rem 3rem;
  -webkit-transform: skew(-15deg);
  transform: skew(-15deg);
  color: #fff;
  background-image: -webkit-gradient(linear, left top, right top, from(#209cff), to(#68e0cf));
  background-image: -webkit-linear-gradient(left, #209cff 0%, #68e0cf 100%);
  background-image: linear-gradient(to right, #209cff 0%, #68e0cf 100%);
}

金属质感背景标题

h2 {
  padding: 1rem 2rem;
  border-top: 4px solid #d8dcdc;
  border-right: 4px solid #666;
  border-bottom: 4px solid #333;
  border-left: 4px solid #868888;
  border-radius: 0;
  background-image: -webkit-linear-gradient(135deg, #ccc 0%, #868888 20%, #d8dcdc 34%, white 53%, #ccc 100%);
  background-image: linear-gradient(-45deg, #ccc 0%, #868888 20%, #d8dcdc 34%, white 53%, #ccc 100%);
}



最后于 2022-9-18 被love2wind编辑 ,原因:
CSS标题样式分享一(渐变)
上传时间:2022-9-16
上传用户:love2wind

关闭
这家伙太懒了,什么也没留下。
©️ 版权声明🔔
本文遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明。
1、本网站的资源主要来源于网络收集,如有侵权,请联系邮箱:i@nicepub进行删除处理。
2、会员发帖仅代表会员个人观点,并不代表本站赞同其观点和对其真实性负责。
3、不得发布和链接任何有关政治, 色情, 宗教, 迷信.低俗、变态、血腥、暴力的帖子。
4、不得发布危害国家安全.诋毁政府形象等违法言论和信息的帖子。
5、本站资源大多为网络云盘,如发现链接失效,可以进行反馈,我们会第一时间更新。
最新回复 (0)
    • 书苑论坛
      2
        马上登录 立即注册
返回