一级退堂鼓演奏家
获得徽章 4
- CSS阴影效果三剑客：box-shadow、text-shadow、drop-shadow
想要盒子的轮廓产生阴影效果，使用box-shadow想要文本的轮廓产生阴影效果，使用text-shadow想要PNG图片非透明部分的轮廓产生阴影效果，使用fliter: drop-shadow()
当然，如果想要依据元素本身颜色产生映射的阴影颜色，可使用fliter的blur()、brightness()、opacity()三者搭配调色产生阴影效果，哔咔哔咔
juejin.im 展开321 - :nth-child(1) 与 :nth-of-type(1) 的区别（以下图代码为例）：
span:nth-child(1) 匹配的是：1. `<span>`；2. 是父元素的第一个孩子。判断条件使用 JS 表达是下面这样的：
if (parent.children[0] && parent.children[0].tagName === 'SPAN') {
/* 为元素应用样式... */
}
a:nth-of-type(1) 匹配的是：在父元素范围内第一个出现的 `<a>`，查找逻辑使用 JS 表达是下面这样的：
if (document.querySelectorAll('.nav > a')[0]) {
/* 为元素应用样式... */
}
demo 地址：codepen.io 展开17
juejin.im