0 0 7 4 - 无敌小锯齿
本帖最后由 不二如是 于 2021-8-11 11:07 编辑看完73，还能看到这里，说明你的眼睛足够强！
应征一句规律：
杀不死我的，只会让我变得更强
废话不多说，锯齿效果，很常用，属于标准化生产。
这次用header举例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>鱼C工作室</title>
<style type="text/css">
body{
margin: 333px;
}
</style>
</head>
<body>
<header>此心光明，不假外求</header>
</body>
</html>
效果图：
初始化的样子，实在有些尴尬。。。
赶紧妙手回春
修改样式，删除body中的margin: 333px
body{
background: #9FF;
}
header{
height: 333px;
width:100%;
color: #FF0;
font-size: 55px;
text-align: center;
font-family: "Adobe Ming Std";
background: #000;
}
效果图：
这些设置，没啥好解释的。
看到黑色和蓝色中间的分界线了吗，在这里进行分割。
还是用利用45deg，linear-gradient 来生成锯齿，在header添加
background-image: linear-gradient(45deg,#FFF 50%,transparent 50%);
background-size: 30px 30px;
效果图：
创建一个30*30px的背景图案，以45度，进行默认的从上往下，线性渐变。
0 - 50%是黑白渐变，以下是透明
锯齿是有了，但位置不是我们想要的。。。
background-repeat: repeat-x;
background-position: 67% 100%
效果图：
通过设置backgound-repeat属性，使得背景图案仅在仅在水平方向上重复，而不是铺满header
然后设置background-positon来设置背景图像的起始位置
第一个值是水平位置，第二个值是垂直位置。
左上角是 0% 0%。右下角是 100% 100%。
因为只重复水平方向，所以第一个值随便写。
只要垂直位置是100%，header的最底下即可。
现在形成的锯齿很难看。。。
我想要对称的锯齿怎么办呢？
很简答，反向-45度，形成两个大小一样，样子相反的三角拼在一起就是了～
现在占有50%有点太大，缩小一半，并且添加反向的,","隔开即可
background-image: linear-gradient(45deg,#FFF 25%,transparent 25%),
linear-gradient(-45deg,#FFF 25%,transparent 25%);
效果图
这个就可爱多了～
最后，只要设定锯齿颜色跟背景色一样，锯齿就搞定了：
background-image: linear-gradient(45deg,#9FF 25%,transparent 25%),
linear-gradient(-45deg,#9FF 25%,transparent 25%);
和70用的套路都一样：”障眼法“
效果图：
**** Hidden Message *****
这位鱼油，如果喜欢本帖子，请订阅 专辑-->（传送门）（不喜欢更要订阅{:10_278:} ）
官方 Web 课程：
https://www.bilibili.com/video/BV1QW411N762 交作业！
学习一下. 回复看帖！ 膜拜一下 栗子很棒，讲解很细，楼主最棒 好好看好好学 真好 RE: 0 0 7 4 - 无敌小锯齿 [修改] 合并的对称锯齿有点小瑕疵，中间出现一条合并的裂痕，希望后续学习的过程能够解决这个问题。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>鱼C工作室</title>
<style type="text/css">
body{
background: #9FF;
}
header{
height: 333px;
width:100%;
color: #FF0;
font-size: 55px;
text-align: center;
font-family: "Adobe Ming Std";
background-color: #000;
background-image: linear-gradient(45deg,#9FF 25%,transparent 25%),
linear-gradient(-45deg,#9FF 25%,transparent 25%);
background-size: 30px 30px;
background-repeat: repeat-x;
background-position: 67% 100%
}
</style>
</head>
<body>
<header>此心光明，不假外求</header>
</body>
</html>
看看啊
页:
[1]