CSS——常用修改样式

去除input type为number时候的按钮

input::-webkit-inner-spin-button {
   -webkit-appearance: none;
}
input::-webkit-outer-spin-button {
   -webkit-appearance: none;
}

修改input的placeholder

 ::-webkit-input-placeholder {
  color: #eee;
}
:-moz-placeholder {
  color: #eee;
}
::-moz-placeholder {
  color: #eee;
}
:-ms-input-placeholder {
  color: #eee;
}

单行文本超出显示省略号

            overflow: hidden;
            text-overflow:ellipsis;
            white-space: nowrap;

多行文本超出显示省略号

  width: 8rem;
    line-height: 0.25rem;
    font-size: 0.14rem;
    color: #666;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    word-break: break-all;
    overflow: hidden;

设置滚动条样式

html::-webkit-scrollbar {
    width: 5px;
    height: 3px;
}

html::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background-color: #8EC5FC;
    background-image: linear-gradient(62deg, #8EC5FC 0%, #E0C3FC 100%);
}

html::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    background-color: #0093E9;
    background-image: linear-gradient(160deg, #0093E9 0%, #80D0C7 100%);
}

修改 记住密码框 默认背景色

input:-webkit-autofill {
 	background-color: #0093E9;
    background-image: linear-gradient(160deg, #0093E9 0%, #80D0C7 100%);
}

强制不换行

  white-space:nowrap; //不换行
  word-wrap:break-word; //自动换行
  word-break:break-all; //强制英文单词断行

模糊

           .child{
				background-color: rgba(0,0,0,0.6);
            	backdrop-filter: blur(12px);
			}
			.child-box{
				filter:blur(12px)
			}

https://blog.csdn.net/HarryHY/article/details/124985008?spm=1001.2014.3001.5501

第一行的第一个字母

CSS 伪元素 ::first-letter会选中某 block-level element（块级元素）第一行的第一个字母，并且文字所处的行之前没有其他内容（如图片和内联的表格）。
值得注意的是必须得要是块级元素 display:block

                &::first-letter {
                    font-size: 40px;
                    font-weight: 600;
                }

三角形

            &::before{
                content: '';
                position: absolute;
                bottom: -30px;
                left: 50%;
                transform: translateX(-50%); 
                border-left: 15px solid transparent;
                border-right: 15px solid transparent;
                border-top: 15px solid rgba(255, 255, 255, 1);
                border-bottom: 15px solid transparent;
            }