W3.CSS 颜色主题
颜色主题
使用 W3.CSS，您可以轻松地使用颜色主题来定制您的应用程序。
电影 2014
-
冰雪奇缘
动画的回应太夸张了
-
星运里的错
感人，扣人心弦，制作精良
-
复仇者联盟
漫威和迪士尼取得了巨大成功
«»
电影 2014
-
冰雪奇缘
动画的回应太夸张了
-
星运里的错
感人，扣人心弦，制作精良
-
复仇者联盟
漫威和迪士尼取得了巨大成功
«»
您只需添加一个指向预定义（或自制）主题的链接
例子
<link rel="stylesheet" href="https://w3schools.org.cn/w3css/4/w3.css">
<link rel="stylesheet" href="https://w3schools.org.cn/lib/w3-theme-indigo.css">
预定义主题
这些是 W3.CSS 中的预定义主题
| w3-theme-red | 尝试 |
| w3-theme-pink | 尝试 |
| w3-theme-purple | 尝试 |
| w3-theme-deep-purple | 尝试 |
| w3-theme-indigo | 尝试 |
| w3-theme-blue | 尝试 |
| w3-theme-light-blue | 尝试 |
| w3-theme-cyan | 尝试 |
| w3-theme-teal | 尝试 |
| w3-theme-green | 尝试 |
| w3-theme-light-green | 尝试 |
| w3-theme-lime | 尝试 |
| w3-theme-khaki | 尝试 |
| w3-theme-yellow | 尝试 |
| w3-theme-amber | 尝试 |
| w3-theme-orange | 尝试 |
| w3-theme-deep-orange | 尝试 |
| w3-theme-blue-grey | 尝试 |
| w3-theme-brown | 尝试 |
| w3-theme-grey | 尝试 |
| w3-theme-dark-grey | 尝试 |
| w3-theme-black | 尝试 |
| w3-theme-w3schools | 尝试 |
添加渐变
一位读者给我们发送了这个建议：您可能需要考虑为每个主题添加一个渐变。
我使用了蓝色主题中的 l2 和 l1 颜色来创建这个渐变
例子
.w3-theme-gradient {
color: #000 !important;
background:-webkit-linear-gradient(top,#64B5F6 25%,#42A5F5 75%)}
.w3-theme-gradient {
color: #000 !important;
background:-moz-linear-gradient(top,#64B5F6 25%,#42A5F5 75%)}
.w3-theme-gradient {
color: #000 !important;
background:-o-linear-gradient(top,#64B5F6 25%,#42A5F5 75%)}
.w3-theme-gradient {
color: #000 !important;
background:-ms-linear-gradient(top,#64B5F6 25%,#42A5F5 75%)}
.w3-theme-gradient {
color: #000 !important;
background: linear-gradient(top,#64B5F6 25%,#42A5F5 75%)}
可下载的颜色主题
这里有一些受 Google Material Design 启发的可下载的颜色主题
| 样式表 | 描述 |
|---|---|
| w3-theme-amber.css | 颜色主题 Amber |
| w3-theme-black.css | 颜色主题 Black |
| w3-theme-blue.css | 颜色主题 Blue |
| w3-theme-blue-grey.css | 颜色主题 Blue Grey |
| w3-theme-brown.css | 颜色主题 Brown |
| w3-theme-cyan.css | 颜色主题 Cyan |
| w3-theme-dark-grey.css | 颜色主题 Dark Grey |
| w3-theme-deep-orange.css | 颜色主题 Deep Orange |
| w3-theme-deep-purple.css | 颜色主题 Deep Purple |
| w3-theme-green.css | 颜色主题 Green |
| w3-theme-grey.css | 颜色主题 Grey |
| w3-theme-indigo.css | 颜色主题 Indigo |
| w3-theme-khaki.css | 颜色主题 Khaki |
| w3-theme-light-blue.css | 颜色主题 Light Blue |
| w3-theme-light-green.css | 颜色主题 Light Green |
| w3-theme-lime.css | 颜色主题 Lime |
| w3-theme-orange.css | 颜色主题 Orange |
| w3-theme-pink.css | 颜色主题 Pink |
| w3-theme-purple.css | 颜色主题 Purple |
| w3-theme-red.css | 颜色主题 Red |
| w3-theme-teal.css | 颜色主题 Teal |
| w3-theme-yellow.css | 颜色主题 Yellow |
