使用CSS+html使网站变得五颜六色
要使网站变得五颜六色，可以使用 CSS 的背景渐变、文本阴影、边框等属性来实现。以下是一个简单的示例：
HTML：
<body>
<div class="colorful-box">
<h1>Welcome to my website!</h1>
<p>This is a colorful website.</p>
<button>Click me!</button>
</div>
</body>CSS：
body {
background: linear-gradient(to bottom, #ff00ff, #00ffff);
/* 使用背景渐变设置页面背景色 */
}
.colorful-box {
background: linear-gradient(to bottom, #ff0000, #ffa500, #ffff00, #008000, #0000ff, #4b0082);
/* 使用背景渐变设置盒子背景色 */
border: 5px solid #fff;
/* 使用边框设置盒子边框颜色 */
border-radius: 10px;
/* 使用边框半径设置盒子圆角 */
padding: 20px;
/* 设置盒子内边距 */
box-shadow: 5px 5px 10px #888888;
/* 使用文本阴影设置盒子阴影 */
}
h1 {
color: #fff;
/* 设置标题颜色 */
text-shadow: 2px 2px 5px #888888;
/* 使用文本阴影设置标题阴影 */
}
p {
color: #fff;
/* 设置段落颜色 */
}
button {
background-color: #fff;
/* 设置按钮背景色 */
color: #000;
/* 设置按钮文本颜色 */
border: none;
/* 去掉按钮边框 */
border-radius: 5px;
/* 设置按钮圆角 */
padding: 10px;
/* 设置按钮内边距 */
box-shadow: 2px 2px 5px #888888;
/* 使用文本阴影设置按钮阴影 */
}
在上面的代码中，页面背景色使用了一个垂直渐变，从粉色 (#ff00ff) 到青色 (#00ffff)。盒子背景色使用了一个水平渐变，从红色 (#ff0000) 到橙色 (#ffa500) 再到黄色 (#ffff00)，再到绿色 (#008000)，再到蓝色 (#0000ff)，最后到紫色 (#4b0082)。盒子边框颜色为白色 (#fff)，圆角为 10px。标题和段落使用了白色字体，并设置了文本阴影。按钮背景色为白色，文本颜色为黑色，圆角为 5px，内边距为 10px，阴影为浅灰色 (#888888)。
© 版权声明
1. 资源都是经过站长或作者收集测试后修改发布分享。转载请在文内以超链形式注明出处，谢谢合作！
2. 本站除原创内容，其余所有内容均收集自互联网，仅限用于学习和研究目的，本站不对其内容的合法性承担任何责任。如有版权内容，请通知我们或作者删除，其版权均归原作者所有，本站虽力求保存原有版权信息，但因众多资源经多次转载，已无法确定其真实来源，或已将原有信息丢失，所以敬请原作者谅解！
3. 本站用户所发布的一切资源内容不代表本站立场，并不代表本站赞同其观点和对其真实性负责，若您对本站所载资源作品版权归属存有异议，请留言附说明联系邮箱，我们将在第一时间予以处理 ，同时向您表示歉意！为尊重作者版权，请购买原版作品，支持您喜欢的作者，谢谢！
4. 本站一律禁止以任何方式发布或转载任何违法的相关信息，访客如有发现请立即向站长举报；本站资源文件大多存储在云盘，如发现链接或图片失效，请联系作者或站长及时更新。
THE END
喜欢就支持一下吧
