本系列谈谈一些有趣的 CSS
题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节。
不断更新中。
题目 1 ~ 5
题目 6 ~ 10
1、下面这个左边竖条图形,只使用一个标签,可以有多少种实现方式:
![border](https://camo.githubusercontent.com/0b0f02ba6158923dea1545ea87c57179b87aef03d13e01d235d518d826c9c858/687474703a2f2f696d616765732e636e626c6f67732e636f6d2f636e626c6f67735f636f6d2f636f636f31732f3838313631342f6f5f626f726465722e706e67)
2、类似下面这样的条纹边框,只使用一个标签,可以有多少种实现方式 -- 从条纹边框的实现谈盒子模型:
![backgroundClip](https://camo.githubusercontent.com/ae297220101d0b9832489e7b54a696a7ff268bc44cf7af3220b2a66fd0806606/687474703a2f2f696d616765732e636e626c6f67732e636f6d2f636e626c6f67735f636f6d2f636f636f31732f3838313631342f6f5f6261636b67726f756e64436c69702e706e67)
3、层叠顺序(stacking level)与堆栈上下文(stacking context)知多少?
4、从倒影说起,谈谈 CSS 继承 inherit
5、纯 CSS 实现单行居中显示文字,多行居左显示,最多两行超过用省略号结尾
![多行文字展示](https://camo.githubusercontent.com/3fed43da8ae4de91ce5a1449c0b66608f6d388e1e6fc1c8a3cd1852cf02d700b/687474703a2f2f696d616765732e636e626c6f67732e636f6d2f636e626c6f67735f636f6d2f636f636f31732f3838313631342f6f5f63656e7465722e706e67)
如何实现下列这种多列均匀布局:
![多列均匀布局](https://camo.githubusercontent.com/9fa3034573a6b97653649939dc3274c30eee44253a6c43aae619ee00f19abcfe/687474703a2f2f696d61676573323031352e636e626c6f67732e636f6d2f626c6f672f3630383738322f3230313630372f3630383738322d32303136303731333138303634343039322d3233363736333332382e706e67)
看看下图,常见于一些导航栏中,要求每行中最后一列的右边框消失,如何在所有浏览器中最便捷最优雅的实现?
![消失的边界线](https://camo.githubusercontent.com/70ff3f0500cc90e61bb5c43239d72aa8b9ed4f65513b30d440518717814bc42d/687474703a2f2f696d616765732e636e626c6f67732e636f6d2f636e626c6f67735f636f6d2f636f636f31732f3838313631342f6f5f6469736170706561722e706e67)
不用 Javascript
,使用纯 CSS
方案,实现类似下图的导航栏切换:
![纯CSS的导航栏切换方案](https://camo.githubusercontent.com/e19eb316ed3759673e4f5458d0fe937ac3086220531161955392414a7af8a0be/687474703a2f2f696d616765732e636e626c6f67732e636f6d2f636e626c6f67735f636f6d2f636f636f31732f3838313631342f6f5f6e61767377697463682e676966)