常用 CSS 样式总结

1.文本首行缩进：

text-indent: 2em;

 

2.禁止多行文本框拖拽

resize: none // 禁止文本框拖拽

 

3.下划线

text-decoration: none/underline; 

 

4.一行文字变成点点：

/* 变成点点点 */  
/* 超出部分隐藏 */
 /* 不换行 */
text-overflow: ellipsis; 
overflow: hidden; 
white-space: nowrap;

 

5.三行文字之后变成点点：

overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;

 

 6.鼠标光标禁用 

鼠标光标显示禁用 cursor: not-allowed;

 

7.禁止选中文本

user-select: none;

 

8.HTML纯数字不换行

word-break:break-all;
word-wrap:break-word

 

9.CSS图片适应盒子大小

object-fit: contain;

 

10.移动端禁止长按出现复制选择

-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;

 

例子：

11.列表最后一个item不显示border-bottom：

.item:not(:last-child) {
  border-bottom: 1px solid #f4f6fc;
}

当然还有其他类名的方法：+，~等css3选择器

 

 12.border颜色渐变

border-image-source: linear-gradient(0deg, #7a6e6a 0%, #17cfcf 100%);

测试：

.box {
  margin: 100px auto;
  width: 100px;
  height: 100px;
  background-color: red;
  box-shadow: inset 0px 6px 5px 0px;
  border-style: solid;
  border-width: 10px;
  border-image-source: linear-gradient(0deg, #7a6e6a 0%, #17cfcf 100%);
  border-image-slice: 1;
}

 

 13.搜索输入框图标美化

 

input[type='search']::-webkit-search-cancel-button {
  -webkit-appearance: none;
  height: 15px;
  width: 15px;
  border-radius: 8px;
  /* background: url('images/searchicon.png') no-repeat 0 0; */
  background: red no-repeat 0 0;
  background-size: 15px 15px;
}

 

 

文字镂空

p {
    font-size: 48px;
    font-style: italic;
    font-weight: bolder;
    color: transparent;
    -webkit-text-stroke: 1px #e7e7e7;
    font-family: 'fantasy';
}