<code class="language-css"><span class="nd">:root</span> <span class="p">{</span>
<span class="o">--</span><span class="n">Excerpt</span><span class="o">-</span><span class="k">padding</span><span class="o">:</span> <span class="m">20px</span><span class="p">;</span>
<span class="o">--</span><span class="n">Excerpt</span><span class="o">-</span><span class="n">highlight</span><span class="o">-</span><span class="k">color</span><span class="o">:</span> <span class="nb">orange</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.Excerpt</span> <span class="p">{</span>
<span class="k">padding</span><span class="o">:</span> <span class="n">var</span><span class="p">(</span><span class="o">--</span><span class="n">Excerpt</span><span class="o">-</span><span class="k">padding</span><span class="p">);</span>
<span class="p">}</span>
</code>
继 @一丝 姐姐的话题。居中,特别是水平垂直居中,感兴趣的可以看看:垂直居中 | 博客自由标签
另外有关于CSS3新东西,我罗列几个值得我们去探讨的东西:
1、Grid布局:Grid | css3教程-css3实例-css3动画
2、Regions:regions | 博客自由标签
3、Shape:Shapes | 博客自由标签
5、倒影:使用CSS3制作倒影
6、蒙板:CSS遮罩——如何在CSS中使用遮罩
7、滤镜:CSS3 Filter的十种特效
其他特性可以看看Christian Krammer
发布的文章:The Future Of CSS: Experimental CSS Properties
虽然有点老,但还是值得一读。
计算属性(倒不用是function,希望有类似calc,但可以包含其他元素选择器或窗口宽高窗口活动距离等预置变量进行计算),或者js里可以对一个css选择器设置样式,甚至绑定function作为计算属性。
标签的title浮层
- 精确地指定某个块状元素第一行基线的位置
- 精确地指定某个 inline-block「对外」所用的基线位置
部分属性支持单位 ppx (physical pixel)
在手机上,动辄 2-3 个物理像素的最小控制单位太粗糙了
Media Query,换算出来用小数,又复杂,又充满了重复劳动啊
原生支持less类型的语法就好. 继承, 变量 和 简单的数学以及色彩计算.
当前元素的previous节点选择器
对高清设备(不同DPI)边框宽度的支持 。页面两个带背景层的混合模式支持
兼容性。