总结一些较偏但实用的CSS样式

业余时间总结一些较偏但是很实用的CSS样式（项目中经常用到），以便下次遇到直接拿来使用：

持续更新中…
(43) CSS颜色高对比度

搭配 mix-blend-mode: difference 基于背景色，自动选择对比度更高的颜色

.p {
	color: color-contrast(var(--bg) vs #fff, #000); 
}
.bg {
	mix-blend-mode: difference
}

(42) CSS 吸附滚动：

.scroller {
  height: 300px;
  overflow-y: scroll;
  scroll-snap-type: y mandatory; // 定义Y轴吸附
}

.scroller section {
  scroll-snap-align: start;
}

(41) CSS 更新：

(40): 元素倒影：

.div {
	box-reflect: left;
}

(39)：给元素自身设置filter效果

.div {
	backdrop-filter: blur(10px)
}

(38): 动画执行效果设置

.div {
	  animation-play-state: paused; // 动画执行暂停
      animation-play-state: running; // 动画执行开始
}

(37): 背面滤镜

.div {
	backdrop-filter: grayscale(1); // 灰度滤镜 与 filter 属性类似
}

(36)：文字描边

.text {
	-webkit-text-stroke: 2px #fff; // 文字描边
}

(35)：元素形状设定

.avatar {
	shape-outside: circle(50%); // 圆形	
	shape-outside: polygon(0 0, 100% 100%, 0 100%); // 三角形形状
	clip-path: polygon( 0 0, 100% 100%, 0 100%); // 裁剪
}

(34)：取 vw 和 vh 的对比值

.vmin {
	width: 100vmin; // 取 vw 和 vh 中较小的值
}
.vmax {
	width: 100vmax; // 取 vw 和 vh 中较大的值
}

(33)：背景图片混合

.bg {
	background-blend-mode: lighten; //
}

(32)：透视函数，3d 元素距视图的距离

.div {
	transform: perspective(10px); // 定义3d元素距离视图的距离
}

(31)：混合模式 rgb 差值混合

.title {
	mix-blend-mode: difference; // 父子元素混合模式 rgb 255(父元素) - 0(子元素)
	mix-blend-mode: darken; // 背景色值混合
	mix-blend-mode: multiply; // 蔡徐坤混合
}

(30)：伪元素获取标签属性值

<div class="div" date-text="123"></div>

.div:before {
	content: attr(data-text);
}

(29)：宽度自适应(flex布局)

header {
	width: fit-content;
}

(28)：高度 hover 自适应

.detail {
	  display: grid;
      grid-template-rows: 0fr;
      background-color: cornflowerblue;
      transition: all .3s;
}
.detail:hover {
	grid-template-rows: 1fr;
}

(27)：元素背面不可见

.bg {
	backface-visibility: hidden;
}

(26)：禁止鼠标点击C3

.btn {
  pointer-events: none;
  cursor: not-allowed;
}

(25)：filter图像过滤

// 这里只说一种，图像模糊，其他类似图像置灰，图像亮度，图像对比度等等
blur {
    -webkit-filter: blur(4px);
    filter: blur(4px);
}

(24)：css实现倒影

.box {-webkit-box-reflect:below 10px -webkit-linear-gradient(transparent,transparent 50%,rgba(0,0,0,.8));} // 倒影在下边
.box {-webkit-box-reflect:above 0 -webkit-linear-gradient(transparent,transparent 50%,rgba(0,0,0,.8));} // 倒影在上边
.box {-webkit-box-reflect:left 1 -webkit-linear-gradient(transparent,transparent 50%,rgba(0,0,0,.8));} // 倒影在左边
.box {-webkit-box-reflect:right -2px  -webkit-linear-gradient(transparent,transparent 50%,rgba(0,0,0,.8));} // 倒影在右边

(23)：cursor为pointer时，移动端会有蓝色背景

  -webkit-tap-highlight-color: transparent

(22)：大小写字母转换

p {text-transform: uppercase}  // 将所有字母变成大写字母
p {text-transform: lowercase}  // 将所有字母变成小写字母
p {text-transform: capitalize} // 首字母大写
p {font-variant: small-caps}   // 将字体变成小型的大写字母

(21)：边框字体同色

.wrap {
	width: 200px;
	height: 200px;
	color: #000;
	font-size: 30px;
	border: 50px solid currentColor;
	// border: 50px solid; // 实现二
}

(20)：select option 样式替换

select { text-align: center; text-align-last: center; }
select option { irection: rtl; }

(19)：使用CSS显示链接之后的URL

a:after{content:" (" attr(href) ") ";}
(1)：防止页面加载时出现 vuejs 的变量名：
v-cloak

(18)：实现一个三角形

border-color: transparent transparent green transparent;
border-style: solid;
border-width: 0px 300px 300px 300px;
height: 0px;
width: 0px;

(17)：使HTML识别string里的 ‘\n’ 并且换行

body { white-space: pre-line; }

(16)：控制单词如何被拆分换行

word-break: normal | break-all | keep-all

(15)：控制长度超过一行的单词是否被拆分换行

word-wrap: normal | break-word

(14)：3D景深，设置3D环境：

perspective: 100;
transform-style:preserve-3d;

(13)：禁止点击，鼠标样式改变：

cursor: not-allowed; // 鼠标禁止点击样式

(12)：设置字间距、单词间距：

letter-spacing:2px; //设置2px的字间距
word-spacing:2px; //设置2px的单词间距

(11)：常用的选择器 :Nth-Child()：

ul:nth-clild(1){
	margin-top:5px;
}

当页面加载的时候从后台获取到数据进行渲染时，在渲染未完成可能会显示出变量名，这时候我们用v-cloak解决：

(2)：修改input的placeholder的样式：

::-webkit-input-placeholder{}    /* 使用webkit内核的浏览器 */
:-moz-placeholder{}                  /* Firefox版本4-18 */
::-moz-placeholder{}                  /* Firefox版本19+ */
:-ms-input-placeholder{}           /* IE浏览器 */

(3)：修改放在input的光标颜色以及聚焦时的边框：

input:focus {}
a,button,input {outline:none}

只修改光标颜色，不修改文字颜色

input {
	caret-color: red;
	color:  #fff;
}

(4)：禁止网页中的文字被选中：

body {
	-o-user-select: none;
	-moz-user-select: none; /*火狐 firefox*/
	-webkit-user-select: none; /*webkit浏览器*/
	-ms-user-select: none; /*IE10+*/
	-khtml-user-select :none; /*早期的浏览器*/
	user-select: none; 
}

(5)：清除手机Tap事件后Element 时候出现的一个高亮：

-webkit-tap-highlight-color: rgba(0,0,0,0);

(6)：CSS开启硬件加速：

-webkit-transform: translateZ(0);

(7)：使用CSS Transforms 或者 Animations时可能会有页面闪烁的Bug：

-webkit-backface-visibility: hidden;

(8)：Css实现不换行、自动换行、强制换行：

white-space:nowrap; //不换行

省略号：

p{
	overflow:hidden;
	texe-overflow:ellipsis;
	white-space:nowrap
}

word-wrap: break-word; //自动换行
word-break: normal; //自动换行
word-break:break-all; //强制换行

(9)：Calc() Function, 计算属性值：
宽度100%减去100px：

div {
	width:calc(100% - 100px)
}

(10)：Css3 Linear-Gradient 线性渐变：
默认从top开始，可以自定义方向：