CSS实战技巧揭秘

这段时间，一直觉得css这块感觉每次写代码都是常用的那些基本属性，觉得始终没有对css有一个更深层次的掌握，所以，最近开始学习css相关进阶知识，首先第一关就是攻克 “css揭秘” 这本经典书籍，所以在阅读过程中，有一些总结想分享给大家，希望大家一起进步。 如果我们想实现两层边…

1. 正方形 2. 圆形 3. 单独设置四个角半径的的圆 4. 单独设置水平方向和垂直方向的圆 6. 半椭圆 7. 四分之一椭圆 注意：从椭圆，到半椭圆，再到四分之一椭圆，我们要理解border-radius是怎么设置的，这就和border-radius的值的写法有关了：bor…

啦啦啦，box-shadow的第四个长度参数隆重登场：它排在 模糊半径参数之后，称作扩张半径。这个参数会根据你指定的值去扩大或 (当指定负值时)缩小投影的尺寸。举例来说，一个 -5px 的扩张半径会把投 影的宽度和高度各减少 10px(即每边各 5px)。 啦啦啦，这样就得到我…

1. 两边对其 2. 连字符断行 连字符用： $shy 去表示。 如果我们想使用连字符断行，可以通过hyphens 去控制， 实际上，有一个 Unicode 字符是专门代表换行符的:0x000A1。在 CSS 中， 这个字符可以写作 "\000A"，或简化为 "\A"。我们可以…

以下是所有光标的效果：我们只需要记住上面这些常用的效果即可。 这也是我们平时做页面的时候，可以优化的一点，尽可能的扩大可点击区域，这样用户更容易到底可点击的区域。 例如下图：我们不要只给➕ 设置点击 事件，而是给整个圆圈区域设置点击事件。 缺点：伪元素无法绑定独立的javasc…

auto为默认值，表示自适应单元格中的内容，此时设置宽度无效。 fixed表示均等分割，即宽度是等分均分的，当然，我们也可以设置宽度。 此时，我们看到部分单元格文本较多，如何隐藏呢？这时，我们可以用text-overflow:ellipsis , 该属性要同时配合：overfl…

方案一：直接让设计给一个gif图片即可。 但是这种方案的缺陷就是gif本身是不透明的，而且我们无法去加一个特殊样式，只能依靠设计给什么样的效果，我们就显示什么样的效果。 方案二：采用js去实现，但是很麻烦。 方案三：完全采用css去实现，无需加载其他资源，而且可以定制开发。 使…