css使用笔记

本文主要用于在css使用过程中收集好用的、有新颖的样式。以文字和代码示例的形式进行说明。

1. 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.

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: 以上为本人学习过程中整理所得，侵删。