# iCSS

**Repository Path**: mmmxa/iCSS

## Basic Information

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

## Statistics

- **Stars**: 1
- **Forks**: 1
- **Created**: 2017-05-09
- **Last Updated**: 2023-12-18

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# iCSS -- intresting css

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

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

题目在 Issues 中，也可以点击下面链接进行跳转。

## Blog

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

[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 动画性能的正确姿势](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` 开始使用圆锥渐变

#### 28、[不可思议的颜色混合模式 `mix-blend-mode`]()