iCSS -- intresting css
本系列谈谈一些有趣的 CSS
话题,内容天马行空,想到什么说什么,不仅是为了拓宽解决问题的思路,更涉及一些容易忽视或是十分有趣的 CSS 细节。
持续更新中,觉得不错的可以点个 star
收藏订阅。
题目在 Issues 中,也可以点击下面链接进行跳转。
同步更新在我的博客上
题目列表
下面这个左边竖条图形,只使用一个标签,可以有多少种实现方式:
1、类似下面这样的条纹边框,只使用一个标签,可以有多少种实现方式 -- 从条纹边框的实现谈盒子模型:
2、层叠顺序(stacking level)与堆栈上下文(stacking context)知多少?
3、从倒影说起,谈谈 CSS 继承 inherit
4、纯 CSS 实现单行居中显示文字,多行居左显示,最多两行超过用省略号结尾
5、全兼容的多列均匀布局问题
6、如何实现下列这种多列均匀布局:
全兼容的最后一条边界线问题
7、看看下图,常见于一些导航栏中,要求每行中最后一列的右边框消失,如何在所有浏览器中最便捷最优雅的实现?
纯CSS的导航栏Tab切换方案
8、不用 Javascript
,使用纯 CSS
方案,实现类似下图的导航栏 Tab 切换:
巧妙的多列等高布局
9、规定下面的布局,实现多列等高布局,要求两列背景色等高。
<div class="container">
<div class="left">多列等高布局左</div>
<div class="right">多列等高布局右</div>
</div>
巧妙的实现 CSS 斜线#
10、使用单个标签,如何实现下图所示的斜线效果。