<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 清除h2元素的边距 */
* {
margin: 0;
padding: 0;
}
h2 {
color: aliceblue;
font-size: 100px;
letter-spacing: 20px;
text-align: center;
/* 把小写字母全部转换成大写 */
text-transform: uppercase;
/* 设置文字阴影 */
/*
text-shadow: 往左偏移 往右偏移 阴影的宽度 阴影的颜色
0 0
0 0 表示既不往左偏移也不往右偏移，这样阴影就会在文字的正后方
*/
text-shadow: 0 0 10px skyblue,0 0 10px skyblue,0 0 10px skyblue,0 0 10px skyblue,0 0 10px skyblue,0 0 10px skyblue;
/* 如果阴影不明显，可以多复制几个text-shadow，以进行阴影叠加, 以逗号隔开 */
/* 使用定义的动画 */
animation: myDongHua 5s linear;
}
div {
/* 给容器设置一个投影 */
/*
--webkit-box-reflect: 投影的位置 投影大小 阴影颜色形状
*/
-webkit-box-reflect:below 1px linear-gradient(transparent,rgba(0,0,0,0.2));
}
body {
/* 显示100%的窗口大小 */
min-height: 100vh; /* vh表示视口高度 */
/* 让div水平垂直居中 */
/* 使用弹性盒模型 */
display: flex;
justify-content: center;
align-items: center;
background-color: #052525;
}
/* 定义一个动画 */
@keyframes myDongHua{
to{
filter: hue-rotate(360deg);
}
}
</style>
</head>
<body>
<div>
<h2>hello</h2>
</div>
</body>
</html>
自学前端CSS层叠样式表
需积分: 0 7 浏览量
2023-12-13
18:36:45
上传
评论
收藏 619KB ZIP 举报
CSS样式.zip （13个子文件） 
列表 
列表样式.css 540B 颜色 颜色.css 1KB
艺术字.html 2KB 背景及图片 背景及图片.css 1KB image 5.webp 338KB
1.jpg 24KB 4.webp 54KB 2.webp 41KB 3.jpg 109KB 1.webp 47KB 抽屉相册.html 2KB 盒子模型 盒子模型.css 803B 权重 权重.css 318B资源评论
