- CSS backdrop-filter 实现半透明毛玻璃等滤镜效果
- CSS伪类、伪元素的妙用 伪类选择器确定子元素数目并且显示不同的样式
- 移动端触摸设备样式优化
CSS backdrop-filter 实现半透明毛玻璃效果
backdrop-filter CSS 属性可以让你为一个元素后面区域添加图形效果（如模糊或颜色偏移）。 因为它适用于元素背后的所有元素，为了看到效果，必须使元素或其背景至少部分透明。
/* 关键词值 */
backdrop-filter: none;
/* 指向 SVG 滤镜的 URL */
backdrop-filter: url(commonfilters.svg#filter);
/* <filter-function> 滤镜函数值 */
backdrop-filter: blur(2px); //模糊
backdrop-filter: brightness(60%); //亮度
backdrop-filter: contrast(40%); //对比度
backdrop-filter: drop-shadow(4px 4px 10px blue); //投影
backdrop-filter: grayscale(30%); //灰度
backdrop-filter: hue-rotate(120deg); //色调变化
backdrop-filter: invert(70%); //反相
backdrop-filter: opacity(20%); //透明度
backdrop-filter: sepia(90%); //饱和度
backdrop-filter: saturate(80%); //褐色
/* 多重滤镜 */
backdrop-filter: url(filters.svg#filter) blur(4px) saturate(150%);
/* 全局值 */
backdrop-filter: inherit;
backdrop-filter: initial;
backdrop-filter: unset;em 没错了，这玩意儿跟filter的写法一毛一样
backdrop-filter是让当前元素所在区域后面的内容模糊灰度等效果的，要想看到效果，需要元素本身半透明或者完全透明；而filter是让当前元素样式的。
想要实现毛玻璃效果只要设置
background-color:rgba(0,0,0,0.15);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);看了一下浏览器兼容性
css3的RGB颜色和HSL颜色， IE8不识别rgba写法
可以看到Chrome76+版本浏览器开始原生支持backdrop-filter属性了。Firefox70+ 在about:config中开启layout.css.backdrop-filter.enabled也可以支持
我们可以通过以下方式实现渐进增强使用
.someclass {
background-color: rgba(0, 0, 0, .45);
}
@supports (-webkit-backdrop-filter:none) or (backdrop-filter:none) {
.someclass {
background: rgba(0, 0, 0, .15);
-webkit-backdrop-filter: blur(5px);
backdrop-filter: blur(5px);
}
}不影响老代码，全新的浏览器又有高大上的效果
CSS伪类、伪元素的妙用
CSS伪类、伪元素是用来添加一些选择器的特殊效果
下面这些是我们平时最常见的伪类选择器
a:link {color:#FF0000;} /* 未访问的链接 */
a:visited {color:#00FF00;} /* 已访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标划过链接 */
a:active {color:#0000FF;} /* 已选中的链接 */
不过我们今天要利用伪类选择器的神奇作用，可以确定子元素数目并且显示不同的样式
:only-child | 只有一个子元素才有作用
:only-child 匹配没有任何兄弟元素的元素.等效的选择器还可以写成 :first-child:last-child或者:nth-child(1):nth-last-child(1)
可以借助此样式设置列表只有一条时的样式。
伪类列表元素
常用于列表的几个伪类元素我们需要知道的有：
:first-child //选取列表中的第一个元素；
:last-child //选取列表中的最后一个元素；
:nth-child() //指定我们需要选取的元素，括号内的值可以是数字，自变量为n的表达式以及even或者是odd（也就是奇偶数）
:nth-child()我们都用过它 用来处理表格隔行样式很好用
第一个子元素为li且父元素拥有2个子元素，则第一个li和后续的li都将应用此样式，而如果有更多或更少的子元素都不会生效。
li:first-child:nth-last-child(2),li:first-child:nth-last-child(2)~li {
//设置样式
}
那么通过
first-child:nth-last-child(2)
即是第1个，又是倒数第2个 总共有两个子元素
那么
first-child:nth-last-child(3)即是第1个，又是倒数第3个 总共有3个子元素
first-child:nth-last-child(4)即是第1个，又是倒数第4个 总共有4个子元素
........
first-child:nth-last-child(n+4)=>即是第1个，又是第2,3,4,,,个=>子元素数目>4
first-child:nth-last-child(-n+4)=>即是第1个，又是倒数第1,2,3,4个=>子元素数目<=4
移动端触摸设备样式优化
在Adnroid版本的微信中，点击a标签时将会出现一个橙色的小框表示点击的响应。
当用户点击iOS的Safari浏览器中的链接或JavaScript的可点击的元素时显示高亮颜色。
取消移动端点击时的蓝色
-webkit-tap-highlight-color: transparent;
ios的局部滚动使用弹性滚动效果
body{
-webkit-overflow-scrolling: touch;
}
.scrolldom{
overflow:auto;
}当在iOS上一直按住一个目标元素时，Safari会展示一个关于这个链接的callout信息，可以用下面这种方式禁用。
webkit-touch-callout:none;移动端著名的1px问题
device-pixel-ratio为2时可以使用下面这种方式，但是兼容性不太好。
@media (-webkit-min-device-pixel-ratio: 2) {
.border {
border-width: 0.5px
}
}使用伪类 + transform 实现
回归正题 还是伪类 熟悉的味道
先把原本元素的 border 去掉，然后利用 :before 或者 :after 重做 border ，并 transform 的 scale缩小一半，原先的元素相对定位，新做的 border 绝对定位。
.border-1px{
position: relative;
border:none;
}
.border-1px:after{
content: '';
position: absolute;
bottom: 0;
background: #000;
width: 100%;
height: 1px;
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
}改变选中内容的背景颜色
::selection {
background: #FFF;
color: #333;
}
::-moz-selection {
background: #FFF;
color: #333;
}
::-webkit-selection {
background: #FFF;
color: #333;
}