https://github.com/lessfish/css-secrets
cheatsheet for the book <CSS Secrets>
https://github.com/lessfish/css-secrets
Last synced: 11 months ago
JSON representation
cheatsheet for the book <CSS Secrets>
- Host: GitHub
- URL: https://github.com/lessfish/css-secrets
- Owner: lessfish
- Created: 2018-01-17T09:48:14.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2023-03-03T14:09:03.000Z (almost 3 years ago)
- Last Synced: 2025-01-06T15:48:59.357Z (about 1 year ago)
- Language: HTML
- Homepage:
- Size: 143 KB
- Stars: 14
- Watchers: 4
- Forks: 8
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# CSS SECRETS
## 02.背景与边框
- [01.半透明边框](//hanzichi.github.io/css-secrets/02.%E8%83%8C%E6%99%AF%E4%B8%8E%E8%BE%B9%E6%A1%86/01.%E5%8D%8A%E9%80%8F%E6%98%8E%E8%BE%B9%E6%A1%86.html)
- [02.多重边框](//hanzichi.github.io/css-secrets/02.%E8%83%8C%E6%99%AF%E4%B8%8E%E8%BE%B9%E6%A1%86/02.%E5%A4%9A%E9%87%8D%E8%BE%B9%E6%A1%86.html)
- [03.灵活的背景定位](//hanzichi.github.io/css-secrets/02.%E8%83%8C%E6%99%AF%E4%B8%8E%E8%BE%B9%E6%A1%86/03.%E7%81%B5%E6%B4%BB%E7%9A%84%E8%83%8C%E6%99%AF%E5%AE%9A%E4%BD%8D.html)
- [04.边框内圆角](//hanzichi.github.io/css-secrets/02.%E8%83%8C%E6%99%AF%E4%B8%8E%E8%BE%B9%E6%A1%86/04.%E8%BE%B9%E6%A1%86%E5%86%85%E5%9C%86%E8%A7%92.html)
- [05.条纹背景](//hanzichi.github.io/css-secrets/02.%E8%83%8C%E6%99%AF%E4%B8%8E%E8%BE%B9%E6%A1%86/05.%E6%9D%A1%E7%BA%B9%E8%83%8C%E6%99%AF.html)
- [06.复杂的背景图案](//hanzichi.github.io/css-secrets/02.%E8%83%8C%E6%99%AF%E4%B8%8E%E8%BE%B9%E6%A1%86/06.%E5%A4%8D%E6%9D%82%E7%9A%84%E8%83%8C%E6%99%AF%E5%9B%BE%E6%A1%88.html)
- [07.伪随机背景](//hanzichi.github.io/css-secrets/02.%E8%83%8C%E6%99%AF%E4%B8%8E%E8%BE%B9%E6%A1%86/07.%E4%BC%AA%E9%9A%8F%E6%9C%BA%E8%83%8C%E6%99%AF.html)
- [08.连续的图像边框](//hanzichi.github.io/css-secrets/02.%E8%83%8C%E6%99%AF%E4%B8%8E%E8%BE%B9%E6%A1%86/08.%E8%BF%9E%E7%BB%AD%E7%9A%84%E5%9B%BE%E5%83%8F%E8%BE%B9%E6%A1%86.html)
## 03.形状
- [09.自适应的椭圆](//hanzichi.github.io/css-secrets/03.%E5%BD%A2%E7%8A%B6/09.%E8%87%AA%E9%80%82%E5%BA%94%E7%9A%84%E6%A4%AD%E5%9C%86.html)
- [10.平行四边形](//hanzichi.github.io/css-secrets/03.%E5%BD%A2%E7%8A%B6/10.%E5%B9%B3%E8%A1%8C%E5%9B%9B%E8%BE%B9%E5%BD%A2.html)
- [11.菱形图片](//hanzichi.github.io/css-secrets/03.%E5%BD%A2%E7%8A%B6/11.%E8%8F%B1%E5%BD%A2%E5%9B%BE%E7%89%87.html)
- [13.梯形标签页](//hanzichi.github.io/css-secrets/03.%E5%BD%A2%E7%8A%B6/13.%E6%A2%AF%E5%BD%A2%E6%A0%87%E7%AD%BE%E9%A1%B5.html)
## 04.视觉效果
- [15.单侧投影](//hanzichi.github.io/css-secrets/04.%E8%A7%86%E8%A7%89%E6%95%88%E6%9E%9C/15.%E5%8D%95%E4%BE%A7%E6%8A%95%E5%BD%B1.html)
## 05.字体排印
- [20.连字符断行](//hanzichi.github.io/css-secrets/05.%E5%AD%97%E4%BD%93%E6%8E%92%E5%8D%B0/20.%E8%BF%9E%E5%AD%97%E7%AC%A6%E6%96%AD%E8%A1%8C.html)
- [21.插入换行](//hanzichi.github.io/css-secrets/05.%E5%AD%97%E4%BD%93%E6%8E%92%E5%8D%B0/21.%E6%8F%92%E5%85%A5%E6%8D%A2%E8%A1%8C.html)
- [22.文本行的斑马条纹](//hanzichi.github.io/css-secrets/05.%E5%AD%97%E4%BD%93%E6%8E%92%E5%8D%B0/22.%E6%96%87%E6%9C%AC%E8%A1%8C%E7%9A%84%E6%96%91%E9%A9%AC%E6%9D%A1%E7%BA%B9.html)
- [23.调整 tab 的宽度](//hanzichi.github.io/css-secrets/05.%E5%AD%97%E4%BD%93%E6%8E%92%E5%8D%B0/23.%E8%B0%83%E6%95%B4%20tab%20%E7%9A%84%E5%AE%BD%E5%BA%A6.html)
- [24.连字](//hanzichi.github.io/css-secrets/05.%E5%AD%97%E4%BD%93%E6%8E%92%E5%8D%B0/24.%E8%BF%9E%E5%AD%97.html)
## 06.用户体验
- [29.选用合适的鼠标光标](//hanzichi.github.io/css-secrets/06.%E7%94%A8%E6%88%B7%E4%BD%93%E9%AA%8C/29.%E9%80%89%E7%94%A8%E5%90%88%E9%80%82%E7%9A%84%E9%BC%A0%E6%A0%87%E5%85%89%E6%A0%87.html)
- [30.扩大可点击区域](//hanzichi.github.io/css-secrets/06.%E7%94%A8%E6%88%B7%E4%BD%93%E9%AA%8C/30.%E6%89%A9%E5%A4%A7%E5%8F%AF%E7%82%B9%E5%87%BB%E5%8C%BA%E5%9F%9F.html)
- [31.自定义复选框](//hanzichi.github.io/css-secrets/06.%E7%94%A8%E6%88%B7%E4%BD%93%E9%AA%8C/31.%E8%87%AA%E5%AE%9A%E4%B9%89%E5%A4%8D%E9%80%89%E6%A1%86.html)
- [32.通过阴影来弱化背景](//hanzichi.github.io/css-secrets/06.%E7%94%A8%E6%88%B7%E4%BD%93%E9%AA%8C/32.%E9%80%9A%E8%BF%87%E9%98%B4%E5%BD%B1%E6%9D%A5%E5%BC%B1%E5%8C%96%E8%83%8C%E6%99%AF.html)
## 07.结构与布局
- [36.自适应内部元素](//hanzichi.github.io/css-secrets/07.%E7%BB%93%E6%9E%84%E4%B8%8E%E5%B8%83%E5%B1%80/36.%E8%87%AA%E9%80%82%E5%BA%94%E5%86%85%E9%83%A8%E5%85%83%E7%B4%A0.html)
- [38.根据兄弟元素的数量来设置样式](//hanzichi.github.io/css-secrets/07.%E7%BB%93%E6%9E%84%E4%B8%8E%E5%B8%83%E5%B1%80/38.%E6%A0%B9%E6%8D%AE%E5%85%84%E5%BC%9F%E5%85%83%E7%B4%A0%E7%9A%84%E6%95%B0%E9%87%8F%E6%9D%A5%E8%AE%BE%E7%BD%AE%E6%A0%B7%E5%BC%8F.html)
- [39.满幅的背景，定宽的内容](//hanzichi.github.io/css-secrets/07.%E7%BB%93%E6%9E%84%E4%B8%8E%E5%B8%83%E5%B1%80/39.%E6%BB%A1%E5%B9%85%E7%9A%84%E8%83%8C%E6%99%AF%EF%BC%8C%E5%AE%9A%E5%AE%BD%E7%9A%84%E5%86%85%E5%AE%B9.html)
- [40.垂直居中](//hanzichi.github.io/css-secrets/07.%E7%BB%93%E6%9E%84%E4%B8%8E%E5%B8%83%E5%B1%80/40.%E5%9E%82%E7%9B%B4%E5%B1%85%E4%B8%AD.html)
- [41.紧贴底部的页脚](//hanzichi.github.io/css-secrets/07.%E7%BB%93%E6%9E%84%E4%B8%8E%E5%B8%83%E5%B1%80/41.%E7%B4%A7%E8%B4%B4%E5%BA%95%E9%83%A8%E7%9A%84%E9%A1%B5%E8%84%9A.html)
---
一点思考：
- html 文件放到 GitHub 的 CI 中去生成去跑去生成？本地的 ignore 掉？