本文总结了CSS中的一些经典问题，包括元素默认蓝色边框的处理，如何实现背景透明但文字不透明，div内img底部间距问题，元素自动填充背景颜色的解决方案，以及transform属性导致的字体模糊问题。同时，文章还探讨了:last-child和:last-of-type的选择器差异。此外，还提及了DOM操作中关于iOS日期显示和ENTER键刷新页面的解决办法。
转眼间，2019年还有不到12个小时就要彻底过去，回顾自己这一年来，收获与失落并存。在这最后时刻，发一篇文章送给社区，也送给自己。
本文摘自这一年来自己在工作中经历的几个比较好的CSS问题(不一定复杂，但个人觉得都挺值得一说)，这些CSS问题平时很少遇到，即使遇到后也不一定知道解决方案，即使知道解决方案也不一定知道产生的原理，同时也准备了2个JS问题(之前有整理过一篇较长的JS问题文章，在此不做推新)。本文会更新下去，希望帮到各位朋友。期待您的点赞，谢谢。
一、CSS篇
1.1 元素默认蓝色边框
input标签元素(如button、text 、areatext)的一些事件(如click、focus等)，在很多浏览器下默认会有蓝色边框出现，如把一个普通button的background和border都设置为none后，触发点击后样式如下：
这是由元素默认的轮廓线产生的，这是浏览器的一种防护机制，起到突出元素的作用，把它干掉就行了，方法如下：
// 方法1:
outline: none / medium;
// 方法2：
outline-width: 0
1.2 背景透明，文字不透明
我们通常是使用 opacity来做背景的透明化处理，该属性被所有浏览器支持，可以大胆使用，透明度从0.0(完全透明)到1.0(完全不透明)，但该方法会使其所有子元素都透明，此时若只想让背景透明，其他不透明，则可以使用rgba处理背景：
background-color: rgba( red , green , blue , alpha )
其中这个alpha 即设置透明度，取值在0~1之间。该方法除IE9以下不可用外，其他浏览器均可用，看一下效果：
同理，我们也可以用这个方法把整个背景做透明了，即多写一个div作为modal层做透明处理，可以明显看到上面文字并未透明：
上述种效果代码如下
最低0.47元/天 解锁文章
2033
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
