此篇博客是学习《CSS 揭秘》一书的学习笔记。 1. 扩大可点击区域 对于那些较小、难以瞄准的控件来说，如果不能放大其视觉尺寸，将其可点击区域扩大也可以提升用户体验。 透明边框 扩张热区最简单的办法就是为它设置一圈透明边框，如下方右边的按钮有 10px 宽的透明边框。 + + HTML <div class="btn-6-1" title="扩大可点击区域之前">+&...
《CSS揭秘》笔记4 — 字体排印
此篇博客是学习《CSS 揭秘》一书的学习笔记。 1. 连字符断行 当文字超出容器元素的宽度时，会换行。默认情况下，文字左对齐且一个完整的单词不会跨行显示，这样每行的末尾会产生参差不齐的空白（见下面左图）。 text-align: justify; 属性能够使文字两端对齐，最后一行无效（见下方右图）。 此属性有个缺点：当容器宽度很小，且单词长度差距很大时，会导致每行文字间隙的差异很大。...
《CSS揭秘》笔记3 — 视觉效果
此篇博客是学习《CSS 揭秘》一书的学习笔记。 1. 单侧投影 尝试实现单侧投影的代码如下： HTML <div class="box-100 bg-red-4 bottom-shadow-4-1"></div> CSS .bottom-shadow-4-1 { box-shadow: 0 5px 4px black; } 效果如下： 第三个值阴影模...
《CSS揭秘》笔记2 — 形状
此篇博客是学习《CSS 揭秘》一书的学习笔记。 1. 自适应椭圆 完整椭圆 我们知道，给一个正方形盒子设置 border-radius: 50%; 时，我们会得到一个圆形： HTML: <div class="box adaptive-ellipse"></div> CSS: .box { width: 100px; height: 100px; ...