Skip to content

jiapeiyang/iCSS

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

25 Commits
 
 

Repository files navigation

iCSS -- intresting css

本系列谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节。

不断更新中。

题目 1 ~ 5

题目 6 ~ 10

题目列表

1、下面这个左边竖条图形,只使用一个标签,可以有多少种实现方式:

border

2、类似下面这样的条纹边框,只使用一个标签,可以有多少种实现方式 -- 从条纹边框的实现谈盒子模型:

backgroundClip

3、层叠顺序(stacking level)与堆栈上下文(stacking context)知多少?

4、从倒影说起,谈谈 CSS 继承 inherit

5、纯 CSS 实现单行居中显示文字,多行居左显示,最多两行超过用省略号结尾

多行文字展示

6、全兼容的多列均匀布局问题

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

多列均匀布局

7、全兼容的最后一条边界线问题

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

消失的边界线

8、纯CSS的导航栏Tab切换方案

不用 Javascript,使用纯 CSS 方案,实现类似下图的导航栏切换:

纯CSS的导航栏切换方案

About

谈谈一些有趣的CSS题目

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published