- 博客(5)
- 收藏
- 关注
RSS订阅原创 字体排印（2）
字体排印（2）调整 tab 的宽度连字华丽的 & 符号 调整 tab 的宽度 难题 包含大量代码的网页（比如文档或教程）在样式上面对着无法回避的挑战。我们通常使用 <pre> 和 <code> 元素来显示代码，它们具有浏览器所赋予的默认样式。这些默认样式往往是： pre, code { font-family: monospace; } pre { display: block; margin: 1em 0; white-space: pre; } 这远
2020-10-25 16:25:06
232
原创 字体排印（1）
字体排印（1）连字符断行插入换行文本行的斑马条纹 连字符断行 难题 设计师迷恋文本的两端对齐效果。看一眼杂志和书籍中的精美排版， 就会发现这种效果无处不在。不过在网页中，两端对齐却极少使用，而且越是有经验的设计师就越少使用。从 CSS 1 开始就已经有 text-align: justify; 了，为什么还会形成这个局面呢？ 只要看一眼下图，其中的原因就会立刻浮出水面。在对文本进行两端对齐处理时，需要调整单词的间距，此时会出现“单词孤岛”现象。这个结果不仅看起来很糟糕，而且损伤了可读性。在打印媒介中，两端对
2020-10-18 15:15:39
281
原创 视觉效果
视觉效果单侧投影单侧投影邻边投影双侧投影不规则投影染色效果基于滤镜的方案基于混合模式的方案 单侧投影 单侧投影 大多数人使用 box-shadow 的方法是，指定三个长度值和一个颜色值： box-shadow: 2px 3px 4px rgba(0,0,0,.5); 接下来的几个步骤很好地（虽然在技术上还不够严谨）以图形化的方式讲解了投影是如何绘制的（参见下图）。 (1) 以该元素相同的尺寸1①和位置，画一个 rgba(0,0,0,.5) 的矩形。 (2) 把它向右移 2px，向下移 3px。 (3)
2020-09-27 16:53:25
753
原创 css背景与边框
css背景与边框半透明边框解决方案多重边框`box-shadow` 方案`outline` 方案灵活的背景定位background-position 的扩展语法方案background-origin 方案 半透明边框 相信你以前肯定尝试过 CSS 中的半透明颜色，比如 rgba() 和 hsla()。半透明颜色是 2009 年发生的一场重大变革。从那以后，我们终于可以在网页设计中使用它们了，但是为了尝鲜还需要付出额外的代价。比如说，我们需要做好回退，加载 shim 脚本，甚至在 IE 下还需要用到恶心的滤镜
2020-09-20 16:46:40
326
原创 CSS中的形状
CSS中的形状自适应的椭圆椭圆半椭圆四分之一椭圆平行四边形其他形状大于号爱心六芒星 自适应的椭圆 椭圆 在日常的编写代码中可以发现给任何正方形元素设置一个足够大的 borderradius，就可以把它变成一个圆形 background: #fb3; width: 200px; height: 200px; border-radius: 100px; /* >= 正方形边长的一半 */ 要写出椭圆的形式就要将border-radius 这个属性后面的值改为百分比形式。这个百分比值会基于元素的尺寸进行
2020-09-13 16:24:02
234
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人