CSS拾遗

之前一直对CSS只有浅显的认识，许多所谓的属性也只是了解了大概，这次趁着项目的机会，也学习了很多，在此记录下来，作为查漏补缺，也作为一次总结

CSS实现disabled效果

.disabled {
	cursor: not-allowed;
    filter: grayscale(80%);
}

这段代码第一个属性cursor: not-allowed实现的是不可点击功能，filter: grayscale(80%)实现的是调整元素的灰度，这样就可实现变灰的不可点击的元素效果

元素显示又消失

ball {
  opacity: 0;
  visibility: hidden;
  transform: scale(1.5);
  transition: opacity visibility 1s, transform 1s 1s ease-in-out;
}
ball.animate {
  opacity: 1;
  visibility: visible;
  transform: scale(0);
}

利用的是transition，在此补充一个知识，可以使元素消失的CSS元素包括opacity，visibility，scale，display，但是前三个属性都能通过transition或者animate控制，display无法控制

动画播放完毕的状态修改

可以通过animation-fill-mode: forwards/backwards;进行动画填充状态的修改，前者代表动画结束后维持结束状态，后者表示动画结束后返回初始状态

修改下划线样式

.underline-color {
  text-decoration: underline;
  text-decoration-color: gray;
}
.underline-color:hover {
  text-decoration: underline;
  color: white;
  text-decoration-color: red;
}

这段代码可以在当前文字下面添加下划线，并且修改下划线的颜色（删除线，上划线等修改text-decoration就可以了），如果想自定义下划线，使用border-bottom也是一样的，这种形式的下划线与文字之间的距离比起系统下划线稍大，且长度与元素长度有关，使用时需注意

.underline-color {
	border-bottom: 1px solid gray;
}
.underline-color:hover {
  	color: white;
 	border-bottom: 1px solid red;
}

图片自适应容器宽高

.img-fit {
  object-fit: contain;
}

object-fit属性置顶元素的内容应该如何去适应指定容器的宽高，通常用于img，video标签。这个属性不是最近才出现的，但是之前一直没有写过太多与img标签直接交互的代码，各大组件库的代码都写的很好的前提下，对这个有用的属性居然没有记忆，所以还是得记录一下

元素阴影处理

.bottom {
 	box-shadow: 0 5px 5px -3px #000 inset;
}
.top {
	box-shadow: 0 -5px 5px -3px #000 inset;
}
.left-right {
	box-shadow: 5px 0 5px -3px #000,
				-5px 0 5px -3px #000;
}
.

之前一直知道box-shadow可以做阴影效果，也没有深入了解过，这次需要做的是背景图片的向下淡化过渡，很自然的（网上找的）想到了这个元素，发现不同处理方式可以获取不同方向的阴影，用以完成不同方向的阴影
～～～～～～～～～～～～～～～～～～
总结到此结束～希望下次能记住