# iCSS

**Repository Path**: quevi/iCSS

## Basic Information

- **Project Name**: iCSS
- **Description**: 谈谈一些有趣的 CSS 话题
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2020-04-15
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## ![logo](https://github.com/chokcoco/iCSS/blob/master/logo.jpg?raw=true)

你想知道的 CSS 奇技淫巧，在这里，都有。

本系列围绕 CSS 展开，谈一些有趣的话题，内容天马行空，想到什么说什么，不仅是为了拓宽解决问题的思路，更涉及一些容易忽视或是十分有趣的 CSS 细节。

持续更新中，觉得不错的可以点个 `star` 订阅收藏支持。

所有文章都在 Issues 中，同步更新到我的[个人博客](http://www.cnblogs.com/coco1s/)，也可以点击下面链接进行跳转。

> 奇文共欣赏，疑义相与析。带着问题来也好，讨论各种黑科技、酷炫的 CSS 技术也行，[一键加 QQ 群讨论](//shang.qq.com/wpa/qunwpa?idkey=318940c0ae56f4556447291fb2fc6147a7b1760487c49c1e3410c377d946fc5a) 。

## Blog

本 CSS 系列同步更新在我的博客：

[CSS进阶系列](http://www.cnblogs.com/coco1s/category/833837.html)

## List

### 1、[下面这个左边竖条图形，只使用一个标签，可以有多少种实现方式：](https://github.com/chokcoco/iCSS/issues/1)

![border](http://images.cnblogs.com/cnblogs_com/coco1s/881614/o_border.png)

### 2、[类似下面这样的条纹边框，只使用一个标签，可以有多少种实现方式 -- 从条纹边框的实现谈盒子模型：](https://github.com/chokcoco/iCSS/issues/1)

![backgroundClip](http://images.cnblogs.com/cnblogs_com/coco1s/881614/o_backgroundClip.png)

### 3、[层叠顺序（stacking level）与堆栈上下文（stacking context）知多少？](https://github.com/chokcoco/iCSS/issues/1)

### 4、[从倒影说起，谈谈 CSS 继承 inherit](https://github.com/chokcoco/iCSS/issues/1)

### 5、[纯 CSS 实现单行居中显示文字，多行居左显示，最多两行超过用省略号结尾](https://github.com/chokcoco/iCSS/issues/1)

![多行文字展示](http://images.cnblogs.com/cnblogs_com/coco1s/881614/o_center.png)

### 6、[全兼容的多列均匀布局问题](https://github.com/chokcoco/iCSS/issues/2)

如何实现下列这种多列均匀布局：

![多列均匀布局](http://images2015.cnblogs.com/blog/608782/201607/608782-20160713180644092-236763328.png)

### 7、[全兼容的最后一条边界线问题](https://github.com/chokcoco/iCSS/issues/2)

看看下图，常见于一些导航栏中，要求每行中最后一列的右边框消失，如何在所有浏览器中最便捷最优雅的实现？

![消失的边界线](http://images.cnblogs.com/cnblogs_com/coco1s/881614/o_disappear.png)

### 8、[纯CSS的导航栏Tab切换方案](https://github.com/chokcoco/iCSS/issues/2)

不用 `Javascript`，使用纯 `CSS` 方案，实现类似下图的导航栏 Tab 切换：

![纯CSS的导航栏切换方案](http://images2015.cnblogs.com/blog/608782/201610/608782-20161013103036328-1395095905.gif)

### 9、[巧妙的多列等高布局](https://github.com/chokcoco/iCSS/issues/2)

规定下面的布局，实现多列等高布局，要求两列背景色等高。

``` HTML
<div class="container">
    <div class="left">多列等高布局左</div> 
    <div class="right">多列等高布局右</div>
</div>
```

### 10、[巧妙的实现 CSS 斜线](https://github.com/chokcoco/iCSS/issues/2)

使用单个标签，如何实现下图所示的斜线效果:

![CSS slash](http://images2015.cnblogs.com/blog/608782/201611/608782-20161103132531986-482520887.png)

### 11、[IFC、BFC、GFC 与 FFC 知多少](https://github.com/chokcoco/iCSS/issues/5)

### 12、[结构性伪类选择器](https://github.com/chokcoco/iCSS/issues/5)

### 13、[引人瞩目的 CSS 变量（Variable）](https://github.com/chokcoco/iCSS/issues/5)

### 14、[CSS命名方式是否有必要规范](https://github.com/chokcoco/iCSS/issues/5)

### 15、[`reset.css` 知多少 ](https://github.com/chokcoco/iCSS/issues/5)

### 16、[你该知道的字体 `font-family`](https://github.com/chokcoco/iCSS/issues/6)

### 17、[再探究字体的渲染规则及 fallback 机制](https://github.com/chokcoco/iCSS/issues/7)

### 18、[使用 `position:sticky` 实现粘性布局](https://github.com/chokcoco/iCSS/issues/8)

### 19、[深入探讨 CSS 特性检测 @supports 与 Modernizr](https://github.com/chokcoco/iCSS/issues/9)

### 20、[巧妙地制作背景色渐变动画！](https://github.com/chokcoco/iCSS/issues/10)

如何实现下述的背景色渐变动画？

![lineargradient](https://cloud.githubusercontent.com/assets/8554143/24186346/d984600a-0f12-11e7-8220-dc9a6c04b7ef.gif)

### 21、[提高 CSS 动画性能的正确姿势 | 盒子端 CSS 动画性能提升研究](https://github.com/chokcoco/iCSS/issues/11)

### 22、[纯 CSS 方式实现 CSS 动画的暂停与播放](https://github.com/chokcoco/iCSS/issues/12)

### 23、[谈谈 CSS 关键字 initial、inherit 和 unset](https://github.com/chokcoco/iCSS/issues/13)

### 24、~~使用 `display:flex` 实现瀑布流布局~~

### 25、[vh、vw、vmin、vmax 知多少](https://github.com/chokcoco/iCSS/issues/15)

### 26、[奇妙的`-webkit-background-clip: text`](https://github.com/chokcoco/iCSS/issues/14)

### 27、[神奇的 `conic-gradient` 圆锥渐变](https://github.com/chokcoco/iCSS/issues/19)

### 28、[不可思议的混合模式 `mix-blend-mode` ](https://github.com/chokcoco/iCSS/issues/16)

### 29、[不可思议的混合模式 `background-blend-mode`](https://github.com/chokcoco/iCSS/issues/31)

### 30、[奇妙的 CSS shapes（CSS图形）](https://github.com/chokcoco/iCSS/issues/18)

### 31、[纯 CSS 实现波浪效果!](https://github.com/chokcoco/iCSS/issues/22)

### 32、[CSS 新特性`contain`，控制页面的重绘与重排](https://github.com/chokcoco/iCSS/issues/23)

### 33、[fixed 定位失效 || 不受控制的 `position:fixed`](https://github.com/chokcoco/iCSS/issues/24)

### 34、[你所不知道的 CSS 动画技巧与细节](https://github.com/chokcoco/iCSS/issues/27)

### 35、[你所不知道的 CSS 滤镜技巧与细节](https://github.com/chokcoco/iCSS/issues/30)

### 36、[`text-fill-color` 与 `color` 的异同](https://github.com/chokcoco/iCSS/issues/17)

### 37、[两行 CSS 代码实现图片任意颜色赋色技术](https://github.com/chokcoco/iCSS/issues/32)

### 38、[不可思议的纯 CSS 导航栏下划线跟随效果](https://github.com/chokcoco/iCSS/issues/33)

如何使用纯 CSS 制作下述下划线跟随效果？

![underline](https://user-images.githubusercontent.com/8554143/37917279-8f6fd236-3150-11e8-8b8d-fca96d1d6001.gif)

### 39、[妙用 scale 与 transfrom-origin，精准控制动画方向](https://github.com/chokcoco/iCSS/issues/34)

如何使用纯 CSS 制作下述下划线跟随效果？

![underline](https://user-images.githubusercontent.com/8554143/38973547-fd32970a-43d8-11e8-94cf-2d30ed12d8cf.gif)

### 40、CSS snap points

### 41、Button Hover Effects

## Contact Me

如果有任何问题或者疑问，可以加 QQ 群：418766876 联系我，[一键加群讨论](//shang.qq.com/wpa/qunwpa?idkey=318940c0ae56f4556447291fb2fc6147a7b1760487c49c1e3410c377d946fc5a) 。

也欢迎想讨论各种天马行空的 CSS 相关问题的小伙伴们加入。

![qun](https://github.com/chokcoco/iCSS/blob/master/qqqun.png)