本文主要用于在css使用过程中收集好用的、有新颖的样式。以文字和代码示例的形式进行说明。
- focus-within
这个伪类和:hover很相似,是在使用了:focus-within的元素或其子元素成为焦点时显现。
比如使表格的某一行高亮,hover在使用鼠标时很好用,但是如果使用tab键获取焦点后,使当前行高亮,可以使用javascript,更简单的方式是使用:focus-within.
height="265" scrolling="no" title="focus-within" src="//codepen.io/Abelce/embed/KxzzLK/?height=265&theme-id=0&default-tab=html,result&embed-version=2" allowfullscreen="true" width="100%">See the Pen focus-within by Abelce ( @Abelce) on CodePen.下面是一个菜单的实现列子:
height="265" scrolling="no" title="oPxMVQ" src="//codepen.io/Abelce/embed/oPxMVQ/?height=265&theme-id=0&default-tab=css,result&embed-version=2" allowfullscreen="true" width="100%">See the Pen oPxMVQ by Abelce ( @Abelce) on CodePen. [codepn](https://codepen.io/Abelce/pen/oPxMVQ)backface-visibility
backface-visibility属性指定当元素背面朝向观察者时是否可见,元素的背面总是透明的,当其朝向观察者时显示正面景象。(因为2d变换无透视效果,所以改属性对2d变换无效)
- visible: 可见
- none: 不可见
filter
css filter提供t图形特效,像模糊、对比度、
#####PS: 以上为本人学习过程中整理所得,侵删。