本文摘自这一年来自己在工作中经历的几个比较好的CSS问题（不一定复杂，但个人觉得都挺值得一说），同时也准备了2个JS问题
一、CSS篇1.1 元素默认蓝色边框
input标签元素（如button、text 、areatext）的一些事件（如click、focus等），在很多浏览器下默认会有蓝色边框出现，如把一个普通button的background和border都设置为none后，触发点击后样式如下：
rgba
这是由元素默认的轮廓线产生的，这是浏览器的一种防护机制，起到突出元素的作用，把它干掉就行了，方法如下：
// 方法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以下不可用外，其他浏览器均可用，看一下效果：
rgba
同理，我们也可以用这个方法把整个背景做透明了，即多写一个div作为modal层做透明处理，可以明显看到上面文字并未透明：
整体背景透明
上述种效果代码如下：
// html
<section>
<div class="item-pic">
<header class="header1">
<h4>你会微笑放手,说好不哭让我出新专辑h4>
header>
div>
<div class="item-pic">
<header class="header2">
<h4>你会微笑放手,说好不哭让我出新专辑h4>
header>
div>
<div class="item-pic">
<div class="handle-opacity">
<header>
<h4>你会微笑放手,说好不哭让我出新专辑h4>
header>
div>
div>
section>
<style lang="less">
.header1 {
opacity: .6;
}
.header2 {
background-color: rgba(0, 0, 0, 0.45);
}
.handle-opacity {
position: absolute;
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, 0.45);
header {
background-color: rgba(0, 0, 0, 0.45);
}
}
style>
1.3 div内置img元素，底部总有间距
用一个div包裹一个img，会出现img不能完全覆盖div空间，总会在底边留下一点空隙。
div底部间隙
这种现象产生的原因是img是行内元素，浏览器为下行字符（如：g、y、j、p、q）留下的一些空间，这些字符是会比其他字符多占据底部一些空间（具体以当前字体大小有关），这种规则会影响行内元素img标签（其默认垂直对齐方式是依照基线来的，即vertical-align: baseline），同样行内元素都会和外部元素留这么一丢丢安全距离。上图右侧就是加了文字的效果，这样就更说明一切了。
现在我们知道这种现象主要是由于下行字符串保护机制和img是行内元素这两个因素导致的，那解决方案就从这两处入手，整理如下：
div设置font-size: 0或line-height: 0，进而行高为0；
img设置 vertical-align: top 或者 middle/，使其不再以默认基线为对齐方式；
img设置 display:block，使其变成块级元素。
综上，个人认为方法3是最好用的，方法1不推荐使用。
1.4 元素自动填充上背景色
该现场多在表单输入等场景上会出现，初次看到确实很怪异，效果如图：
默认颜色
即当浏览器（chrome）给输入框自动填充内容后，也会自动给输入框带上背景（黄或灰蓝），该问题是由于chrome会默认给自动填充的input、select、textarea等加上:-webkit-autofill私有伪属性造成的，比较好的解决方案就是做样式覆盖，代码如下：
input:-webkit-autofill{
box-shadow: 0 0 0px 1000px white inset !important;
}
select:-webkit-autofill{
box-shadow: 0 0 0px 1000px white inset !important;
}
textarea:-webkit-autofill{
box-shadow: 0 0 0px 1000px white inset !important;
}
比较渣的办法是设置禁止自动填充，但还是别那样做了…
1.5 transform 基数值导致字体模糊
transform作为CSS3最为自豪的属性，已经成为了当前前端开发中不可或缺的方法，但它有个渲染的问题，即当元素设置有transform，且其值为基数或小数，同事其整体高度也有基数时，其内部文字会变模糊，如图：
模糊
上图上模糊状态下的，下图是修正过的，具体原因经查可能是因为transform变换会在浏览器上单独创建一个绘画层并重新进行渲染，在此渲染过程中也处理了周围的文字，如果高度为奇数的文字可能会存在半个像素的计算量，浏览器对这半个像素会进行优化渲染，所以边缘会出现模糊的情况。解决方案即：
不要给transform属性值设置奇数和小数值；
调整整体元素高度不要为基数。
1.6 :last-child 和 :last-of-type
作为CSS常用伪类选择器，:last-child经常会被用到，但有时遇到极端情况，它会意外失效，让人摸不着头脑，例子如下：
3个img标签包裹在card中，当前需求是使最后一张图的边框呈粉色，代码如下：
// html
<div class="card">
<img
v-for="(item,i) in pics"
:key="i"
:src="item"
/>
div>
// css
<style lang="less">
.card {
> img {
width: 150px;
margin-right: 10px;
&:last-child {
border: 5px solid pink;
}
}
}
style>
同理用:last-of-type也能实现：
.card {
> img {
width: 150px;
margin-right: 10px;
&:last-of-type {
border: 5px solid pink;
}
}
}
效果如下：
有效
现在要往img后加一个span，发现:last-child已失效：
// html
<div class="card">
<img
v-for="(item,i) in pics"
:key="i"
:src="item"
/>
<span>next is ...span>
div>
// css
<style lang="less">
.card {
> img {
width: 150px;
margin-right: 10px;
&:last-child {
border: 5px solid pink;
}
}
}
style>
失效
而此时:last-of-type依然没问题：
有效2
现在得出结论：
:last-child选取一群兄弟元素中的最后一个元素，且最后的这个元素必须是所声明的指定元素（注意2个条件）；
:last-of-type选取一群兄弟元素中的最后一个指定类型的元素。
可知，:last-of-type更严谨一些，不容易产生意外bug，我更推荐使用它。同理适用于:nth-last-child(n)和:nth-last-of-type(n)
二、DOM篇
这部分我会叙述一些DOM操作遇到的一些容易被忽视的问题。
2.1 IOS日期显示问题
经常做H5移动端开发的朋友我想对这个问题肯定不陌生，那就是在部门IOS版本（IOS5及以下）中，对以“-”间隔的字符串时间格式的解析是不成功的，比如我们写了这么一个鸡肋时间格式适配器：
function DateFormat(date) {
if(!date) return null;
date = new Date(date);
let Y = date.getFullYear();
let M = (date.getMonth() >= 0 && date.getMonth() <= 8) ? `0${date.getMonth() + 1}` : `${date.getMonth() + 1}`;
let D = (date.getDate() >= 0 && date.getDate() <= 9) ? `0${date.getDate()}`: `${date.getDate()}`;
return `Y-M-D`
}
22个实用的CSS技巧，让你的网站脱颖而出
大厂技术 高级前端 Node进阶
点击上方 程序员成长指北，关注公众号
回复1，加入高级Node交流群
前言
大家好，我是考拉
想要让你的网站在激烈的竞争中脱颖而出吗？使用CSS的强大功能可以帮助你实现这一目标。本文将分享22个实用的CSS技巧，帮助你提升网站的外观和用户体验。无论你是一个新手还是有经验的开发者，这些技巧都将为你的网站注入新鲜的设计元素和动感效果。
自定义字体：通过使用@font-face规则，你可以在网站中应用自定义字体，增加独特性和品牌识别度。选择适合你网站风格的字体，并确保它们能够正确加载和显示。
渐变背景色：使用CSS渐变背景色可以为你的网站添加华丽的外观。尝试不同类型的渐变，如线性渐变、径向渐变或重复渐变。通过指定起始颜色和结束颜色，你可以创建丰富多彩的背景效果。
css
复制代码
.background {
background: linear-gradient(to right, #ff9900, #ff5500);
}动画效果：利用CSS的过渡和动画属性，为你的网站添加动感效果。创建平滑的过渡、淡入淡出效果或引人注目的动画序列。通过定义动画的持续时间、延迟时间和重复次数，你可以控制动画的表现方式。
css
复制代码
.box {
transition: background-color 0.3s ease-in-out;
}
.box:hover {
background-color: #ff5500;
}响应式布局：使用CSS媒体查询来创建响应式布局，使你的网站在不同设备上都能呈现出良好的用户体验。根据屏幕尺寸和方向，调整元素的大小、位置和样式。使用弹性盒子（Flexbox）或网格布局（Grid Layout）来实现灵活的自适应设计。
css
复制代码
@media screen and (max-width: 768px) {
.container {
flex-direction: column;
}
.sidebar {
order: 2;
}
.main-content {
order: 1;
}
}平滑滚动效果：通过使用CSS的scroll-behavior属性，你可以为网页添加平滑滚动效果，使页面在滚动时更加流畅和舒适。将其应用于html或body元素，即可启用平滑滚动效果。
css
复制代码
html {
scroll-behavior: smooth;
}网格布局：使用CSS网格布局可以轻松创建复杂的网格结构，实现灵活的页面布局。通过定义网格容器和网格项，你可以精确控制元素的位置和大小。
css
复制代码
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 20px;
}
.grid-item {
grid-column: span 2;
grid-row: span 1;
}自定义滚动条样式：通过使用CSS的::-webkit-scrollbar伪类选择器，你可以自定义滚动条的样式。调整滚动条的宽度、颜色和形状，以适应你的设计需求。
ruby
复制代码
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-thumb {
background-color: #ff5500;
}
::-webkit-scrollbar-track {
background-color: #f1f1f1;
}响应式字体大小：使用CSS的vw单位（视窗宽度的百分比）可以创建响应式字体大小。通过设置根元素的字体大小为vw单位，使字体随着屏幕尺寸的变化而自适应。
css
复制代码
html {
font-size: 4vw;
}阴影效果：通过使用CSS的box-shadow属性，你可以添加阴影效果，为元素增添立体感和深度。调整阴影的颜色、模糊程度和偏移量，以实现不同的效果。
css
复制代码
.box {
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}自定义滚动条样式：通过使用CSS的::-webkit-scrollbar伪类选择器，你可以自定义滚动条的样式。调整滚动条的宽度、颜色和形状，以适应你的设计需求。
css
复制代码
/* Webkit浏览器（Chrome等） */
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background-color: #f1f1f1;
}
::-webkit-scrollbar-thumb {
background-color: #888;
}
::-webkit-scrollbar-thumb:hover {
background-color: #555;
}文本溢出省略号：当文本内容超过容器宽度时，可以使用CSS的text-overflow属性来实现省略号的效果，以便更好地处理长文本。
css
复制代码
.container {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}边框动画效果：通过使用CSS的transition属性和:hover伪类，可以为元素添加边框动画效果，使其在鼠标悬停时产生过渡效果。
css
复制代码
.box {
border: 1px solid #ccc;
transition: border-color 0.3s ease-in-out;
}
.box:hover {
border-color: #ff5500;
}图片模糊效果：通过使用CSS的filter属性中的blur函数，你可以为图片添加模糊效果。调整模糊程度，使图像呈现出柔和的视觉效果。
css
复制代码
.image {
filter: blur(5px);
}渐变背景色：使用CSS的linear-gradient函数，你可以为元素创建渐变背景色。定义起点和终点的颜色值，以及渐变的方向，实现各种炫丽的背景效果。
css
复制代码
.container {
background: linear-gradient(to right, #ff5500, #ffd200);
}文字阴影效果：通过使用CSS的text-shadow属性，你可以为文字添加阴影效果，增加文字的可读性和视觉效果。可以调整阴影的颜色、位置和模糊程度。
arduino
复制代码
.text {
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}渐变边框样式：使用CSS的border-image属性，你可以创建具有渐变效果的边框样式。定义渐变图像或渐变颜色作为边框的源，以及边框的切片方式和宽度。
.border {
border: 10px solid;
border-image: linear-gradient(to right, #ff5500, #ffd200) 1;
}旋转动画效果：通过使用CSS的transform属性，你可以为元素创建旋转动画效果。指定旋转角度和过渡时间，在页面中实现各种旋转效果。
.box {
transform: rotate(45deg);
transition: transform 0.3s ease-in-out;
}
.box:hover {
transform: rotate(90deg);
}渐变文本效果：使用CSS的background-clip属性和渐变背景色，可以为文本创建渐变效果。将渐变应用到文本的背景区域，形成独特的渐变文本效果。
.text {
background: linear-gradient(to right, #ff5500, #ffd200);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}透明度动画效果：通过使用CSS的opacity属性和transition属性，你可以为元素创建透明度动画效果。控制元素的透明度，使其在过渡期间平滑淡入或淡出。
.box {
opacity: 0;
transition: opacity 0.3s ease-in-out;
}
.box:hover {
opacity: 1;
}悬浮效果：通过使用CSS的:hover伪类和transform属性，可以为元素创建各种悬浮效果，如放大、旋转、倾斜等。
.box {
transition: transform 0.3s ease-in-out;
}
.box:hover {
transform: scale(1.2);
}渐变阴影效果：使用CSS的box-shadow属性，你可以为元素创建渐变阴影效果。定义阴影的颜色和偏移量，使元素呈现出立体感。
css
复制代码
.box {
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), inset 0 0 8px rgba(255, 255, 255, 0.5);
}文字动画效果：通过使用CSS的@keyframes规则和animation属性，可以为文字创建动画效果。定义关键帧和动画属性，使文字在页面中产生动态效果。
css
复制代码
.text {
animation: rainbow 5s infinite;
}
@keyframes rainbow {
0% { color: red; }
20% { color: orange; }
40% { color: yellow; }
60% { color: green; }
80% { color: blue; }
100% { color: purple; }
}
