前端常用的css样式

说明	属性
文字修饰	text-decoration: underline;(下划线) overline;(上划线) line-through;(删除线) blink;(闪烁)
禁止拖拽修改textarea大小	resize:none
放大效果	transform: scale(1.3)
首行缩进两个字符	text-indent:2em
虚线边框	border: 1px dashed transparent dotted;(点线) dashed;(虚线) solid; double;(双线) groove;(槽线) ridge;(脊状) inset;(凹陷)
设置每个字符之间的间距	letter-sapcing:2px
文字模糊	color: transparent; text-shadow: #111 0 0 5px;
文字实现左右对齐	text-align-last: justify;

1. 文本超出显示...

// 注意:一定要设置超出部分的宽度

// 单行显示
width:200rpx;
overflow: hidden;
text-overflow:ellipsis; //溢出文本以省略号显示
white-space: nowrap;//强制文本不换行

// 多行显示
display: -webkit-box;//对象作为弹性伸缩盒子模型显示 
-webkit-box-orient: vertical;//设置框内子元素的排列方式。
-webkit-line-clamp: 3;//限制在一个块元素显示的文本的行数。
overflow: hidden;

2.设置颜色和背景色

background:#012356;//颜色设置
opacity:0.8;//透明度设置
/*该方法设置的透明度会导致整个框内元素都继承了该透明度属性，若要针对某一个元素的属性设置透明度，如背景设置透明度，则建议采用*/
background:rgba(255,255,255,0.8)//针对背景颜色单独设置透明度，但是IE8不识别。

// 文字渐变
background-image: linear-gradient(to top, #63a5ee, #eff6fd);
-webkit-background-clip: text;
color: transparent;

// 背景渐变
background-image: linear-gradient(to top, #63a5ee, #eff6fd);

3.设置页面滚动条的样式

 /* 修改滚动条的样式*/
.scroll::-webkit-scrollbar {
  /* 对应纵向滚动条的宽度 */
  width: 10px;
  /* 对应横向滚动条的宽度 */
  height: 10px;
}

/* 滚动条上的滚动滑块 */
.scroll::-webkit-scrollbar-thumb {
  background-color: rgba(61,255,255,0.7);
  /* background: linear-gradient(to left, rgba(73,177,245,.5),rgba(255,255,255,0)); */
  backdrop-filter: blur(2px);
  border-radius: 32px;
}

/* 滚动条轨道 */
.scroll::-webkit-scrollbar-track {
  background-color: rgba(255,255,255,0);
  border-radius: 32px;
}

/* 隐藏滚动条 */
&::-webkit-scrollbar {
    display: none;
 } 

4.动态设置宽高

height: calc(100vh - 88rpx);  // 一个盒子固定一个高度，另一个高度自适应

calc() 函数用于动态计算长度值。
需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)；
任何长度值都可以使用calc()函数进行计算；
calc()函数支持 "+", "-", "*", "/" 运算；
calc()函数使用标准的数学运算优先级规则；

5. 文本属性

1. color : #999999; /*文字颜色*/
2. font-family : 宋体,sans-serif; /*文字字体*/
3. font-size : 9pt; /*文字大小*/
4. font-style:itelic; /*文字斜体*/
5. font-variant:small-caps; /*小字体*/
6. letter-spacing : 1pt; /*字间距离*/
7. line-height : 200%; /*设置行高*/
8. font-weight:bold; /*文字粗体*/
9. vertical-align:sub; /*下标字*/
10. vertical-align:super; /*上标字*/
11. text-decoration:line-through; /*加删除线*/
12. text-decoration: overline; /*加顶线*/
13. text-decoration:underline; /*加下划线*/
14. text-decoration:none; /*删除链接下划线*/
15. text-transform : capitalize; /*首字大写*/
16. text-transform : uppercase; /*英文大写*/
17. text-transform : lowercase; /*英文小写*/
18. text-align:right; /*文字右对齐*/
19. text-align:left; /*文字左对齐*/
20. text-align:center; /*文字居中对齐*/
21. text-align:justify; /*文字分散对齐*/
vertical-align属性
22. vertical-align:top; /*垂直向上对齐*/
23. vertical-align:bottom; /*垂直向下对齐*/
24. vertical-align:middle; /*垂直居中对齐*/
25. vertical-align:text-top; /*文字垂直向上对齐*/
26. vertical-align:text-bottom; /*文字垂直向下对齐*/