# iCSS

**Repository Path**: mobile-webs/iCSS

## Basic Information

- **Project Name**: iCSS
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2019-08-06
- **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/web动画 展开，谈一些有趣的话题，内容天马行空，想到什么说什么，不仅是为了拓宽解决问题的思路，更涉及一些容易忽视或是十分有趣的 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)

## Article List

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

![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/48)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

``` 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/56)

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

#### 13、[引人瞩目的 CSS 自定义属性（CSS Variable）](https://github.com/chokcoco/iCSS/issues/58)

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

#### 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、[纯 CSS 实现瀑布流布局](https://github.com/chokcoco/iCSS/issues/40)

#### 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)

#### 40、[Pure CSS Button Effect](//codepen.io/Chokcoco/pen/MGPwLg)

#### 41、[神奇的选择器 `:focus-within`](https://github.com/chokcoco/iCSS/issues/36)

#### 42、[滚动视差? CSS不在话下](https://github.com/chokcoco/iCSS/issues/37)

#### 43、[你所不知道的 CSS 阴影技巧与细节](https://github.com/chokcoco/iCSS/issues/39)

#### 44、[探究 CSS 混合模式\滤镜导致 CSS 3D 失效问题](https://github.com/chokcoco/iCSS/issues/41)

#### 45、[不可思议的纯 CSS 进度条效果](https://github.com/chokcoco/iCSS/issues/43)

#### 46、[有趣的 `box-decoration-break`](https://github.com/chokcoco/iCSS/issues/45)

#### 47、[不可思议的纯 CSS 实现鼠标跟随](https://github.com/chokcoco/iCSS/issues/46)

#### 48、[如何使用 CSS 让你的浏览器卡死崩溃](https://github.com/chokcoco/iCSS/issues/47)

#### 49、[CSS 火焰，不在话下](https://github.com/chokcoco/iCSS/issues/62)

#### 50、[巧妙使用 CSS 控制动画行进](https://github.com/chokcoco/iCSS/issues/63)

#### 51、[探究 flex 盒子下 margin 的更多用法]()

## Contact Me

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

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

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