前端常用css属性

1、文字超出部分显示省略号

// 单行文本的溢出显示省略号（一定要有宽度）
p {
    width: 200rpx;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
// 文字超出部分显示省略号  多行文本溢出显示省略号
p {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}

2、中英文自动换行

// word-break:break-all;只对英文起作用，以字母作为换行依据word-wrap:break-word;
// 只对英文起作用，以单词作为换行依据white-space:pre-wrap;
// 只对中文起作用，强制换行white-space:nowrap;
// 强制不换行，都起作用 
  p{
    word-wrap: break-word;
    white-space: normal;
    word-break: break-all;
  }
  // 不换行
  .wrap {
    white-space:nowrap;
  }
  // 自动换行
  .wrap {
    word-wrap: break-word;
    word-break: normal;
  }
  // 强制换行
  .wrap {
    word-break:break-all;
  }
文

3、字阴影

// text-shadow 为网页字体添加阴影，通过对text-shadow属性设置相关的属性值。
// 属性与值的说明如下：text-shadow: [X-offset,Y-offset,Blur,Color];

// X-offset:指阴影居于字体水平偏移的位置。
// Y-offset:指阴影居于字体垂直偏移的位置。
// Blur:指阴影的模糊值。
// color:指阴影的颜色；

h1{
text-shadow: 5px 5px 5px #FF0000;
}

4、设置placeholder的字体样式

input::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: red;
}
input::-moz-placeholder { /* Firefox 19+ */
  color: red;
}
input:-ms-input-placeholder { /* IE 10+ */
  color: red;
}
input:-moz-placeholder { /* Firefox 18- */
  color: red;
}

5、不固定高宽 div 垂直居中的方法

方法一：伪元素和 inline-block / vertical-align（兼容 IE8）

.box-wrap:before {
      content: '';
      display: inline-block;
      height: 100%;
      vertical-align: middle;
      margin-right: -0.25em; //微调整空格
}
.box {
     display: inline-block;
     vertical-align: middle;
}
方法二：flex(不兼容 ie8 以下)

.box-wrap {
     height: 300px;
     justify-content:center;
     align-items:center;
     display:flex;
     background-color:#666;
 }
方法三：transform(不兼容 ie8 以下)

 .box-wrap {
     width:100%;
     height:300px;
     background:rgba(0,0,0,0.7);
     position:relative;
}
.box{
    position:absolute;
    left:50%;
    top:50%;
    transform:translateX(-50%) translateY(-50%);
    -webkit-transform:translateX(-50%) translateY(-50%);
}
方法四：设置 margin:auto（该方法得严格意义上的非固定宽高，而是 50%的父级的宽高。）

.box-wrap {
    position: relative;
    width:100%;
    height:300px;
    background-color:#f00;
}
.box-content{
    position: absolute;
    top:0;
    left:0;
    bottom:0;
    right:0;
    width:50%;
    height:50%;
    margin:auto;
    background-color:#ff0;
}

6、解决IOS页面滑动卡顿

body,html{
    -webkit-overflow-scrolling: touch;
}

7、设置滚动条样式

.test::-webkit-scrollbar{
  /*滚动条整体样式*/
  width : 10px;  /*高宽分别对应横竖滚动条的尺寸*/
  height: 1px;
}
.test::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius   : 10px;
  background-color: skyblue;
  background-image: -webkit-linear-gradient(
      45deg,
      rgba(255, 255, 255, 0.2) 25%,
      transparent 25%,
      transparent 50%,
      rgba(255, 255, 255, 0.2) 50%,
      rgba(255, 255, 255, 0.2) 75%,
      transparent 75%,
      transparent
  );
}
.test::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
  background   : #ededed;
  border-radius: 10px;
}

8、实现隐藏滚动条同时又可以滚动

.demo::-webkit-scrollbar {
  display: none; /* Chrome Safari */
}

.demo {
  scrollbar-width: none; /* firefox */
  -ms-overflow-style: none; /* IE 10+ */
  overflow-x: hidden;
  overflow-y: auto;
}

9、css 绘制三角形

div {
    width: 0;
    height: 0;
    border-width: 0 40px 40px;
    border-style: solid;
    border-color: transparent transparent red;
}

效果如下：图片

实现带边框的三角形：

<div id="blue"><div>
#blue {
    position:relative;
    width: 0;
    height: 0;
    border-width: 0 40px 40px;
    border-style: solid;
    border-color: transparent transparent blue;
}
#blue:after {
    content: "";
    position: absolute;
    top: 1px;
    left: -38px;
    border-width: 0 38px 38px;
    border-style: solid;
    border-color: transparent transparent yellow;
}

效果如下：图片

注: 如果想绘制右直角三角，则将左 border 设置为 0；如果想绘制左直角三角，将右 border 设置为 0 即可（其它情况同理）。

10、Table表格边框合并

table,tr,td{
  border: 1px solid #666;
}
table{
  border-collapse: collapse;
}

11、css 选取第 n 个标签元素

first-child first-child 表示选择列表中的第一个标签。
last-child last-child 表示选择列表中的最后一个标签
nth-child(3) 表示选择列表中的第 3 个标签
nth-child(2n) 这个表示选择列表中的偶数标签
nth-child(2n-1) 这个表示选择列表中的奇数标签
nth-child(n+3) 这个表示选择列表中的标签从第 3 个开始到最后。
nth-child(-n+3) 这个表示选择列表中的标签从 0 到 3，即小于 3 的标签。
nth-last-child(3) 这个表示选择列表中的倒数第 3 个标签。

使用方法：
li:first-child{}

12、移动端软键盘变为搜索方式

默认情况下软键盘上该键位为前往或者确认等文字，要使其变为搜索文字，需要在 input 上加上 type 声明：

<form action="#">
    <input type="search" placeholder="请输入..." name="search" />
</form>

需要一个 form 标签套起来,并且设置 action 属性,这样写完之后输入法的右下角就会自动变成搜索,同时，使用了 search 类型后，搜索框上会默认自带删除按钮。

13、onerror 处理图片异常

使用 onerror 异常处理时，若 onerror 的图片也出现问题，则图片显示会陷入死循环，所以要在赋值异常图片之后，将地址置空

<img onerror="this.src='url;this.οnerrοr=null'" />

14、背景图片的大小

.bg-img{
    background:url(../img/find_pw_on_2.png)  no-repeat center center !important;
    background-size: 27px auto !important;
    /*background-size: 100% 100%;*/
    /*background-size: 50px 100px*/
}

15、文字之间的间距

p{
  text-indent：10px；//单词抬头距离
  letter-spacing：10px；//间距
}

16、元素占满整个屏幕

.dom{
  width:100%;
  height:100vh;
}

17、CSS实现文本两端对齐

.wrap {
    text-align: justify;
    text-justify: distribute-all-lines;  //ie6-8
    text-align-last: justify;  //一个块或行的最后一行对齐方式
    -moz-text-align-last: justify;
    -webkit-text-align-last: justify;
}

18、实现文字竖向排版

// 单列展示时
.wrap {
    width: 25px;
    line-height: 18px;
    height: auto;
    font-size: 12px;
    padding: 8px 5px;
    word-wrap: break-word;/*英文的时候需要加上这句，自动换行*/ 
}
// 多列展示时
.wrap {
    height: 210px;
    line-height: 30px;
    text-align: justify;
    writing-mode: vertical-lr;  //从左向右    
    writing-mode: tb-lr;        //IE从左向右
    //writing-mode: vertical-rl;  -- 从右向左
    //writing-mode: tb-rl;        -- 从右向左
}

19、使元素鼠标事件失效

.wrap {
  // 如果按tab能选中该元素，如button，然后按回车还是能执行对应的事件，如click。
 pointer-events: none;
 cursor: default;
}

20、禁止用户选择

.wrap {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

21、使用硬件加速

在浏览器中用css开启硬件加速，使GPU (Graphics Processing Unit) 发挥功能，从而提升性能。硬件加速在移动端尤其有用，因为它可以有效的减少资源的利用。
目前主流浏览器会检测到页面中某个DOM元素应用了某些CSS规则时就会开启，最显著的特征的元素的3D变换。如果不使用3D变形，我们可以通过下面方式来开启：

.wrap {
    transform: translateZ(0);
}

22、页面动画出现闪烁问题

在 Chrome and Safari中，当我们使用CSS transforms 或者 animations时可能会有页面闪烁的效果，下面的代码可以修复此情况：

.cube {
   -webkit-backface-visibility: hidden;
   backface-visibility: hidden;
 
   -webkit-perspective: 1000;
   perspective: 1000;
   /* Other transform properties here */
}

在webkit内核的浏览器中，另一个行之有效的方法是

.cube {
   -webkit-transform: translate3d(0, 0, 0);
   transform: translate3d(0, 0, 0);
  /* Other transform properties here */
}

23、字母大小写转换

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

24、将一个容器设为透明

.wrap { 
  filter:alpha(opacity=50); 
  -moz-opacity:0.5; 
  -khtml-opacity: 0.5; 
  opacity: 0.5; 
}

25、消除transition闪屏

.wrap {
    -webkit-transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;
    -webkit-perspective: 1000;
}

26、识别字符串里的 ‘\n’ 并换行

一般在富文本中返回换行符不是
的标签，而且\n。不使用正则转换的情况下，可通过下面样式实现换行。

body {
   white-space: pre-line;
}

27、移除a标签被点链接的边框

a {
  outline: none；//或者outline: 0
  text-decoration:none; //取消默认下划线
}

28、CSS显示链接之后的URL

<a href="//www.webqdkf.com">有课前端网</a>
<style>
a:after {content: " (" attr(href) ")";}
</style>

29、select内容居中显示、下拉内容右对齐

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

30、修改input输入框中光标的颜色不改变字体的颜色

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

31、子元素固定宽度 父元素宽度被撑开

// 父元素下的子元素是行内元素
.wrap {
  white-space: nowrap;
}
// 若父元素下的子元素是块级元素
.wrap {
  white-space: nowrap;  // 子元素不被换行
  display: inline-block;
}

32、让div里的图片和文字同时上下居中

这里不使用flex布局的情况。通过vertival-align

.wrap {
  height: 100,
  line-height: 100
}
img {
  vertival-align：middle
}
// vertical-align css的属性vertical-align用来指定行内元素（inline）
// 或表格单元格（table-cell）元素的垂直对齐方式。
// 只对行内元素、表格单元格元素生效，不能用它垂直对齐块级元素
// vertical-align：baseline/top/middle/bottom/sub/text-top;

33、实现宽高等比例自适应矩形

.scale {
  width: 100%;
  padding-bottom: 56.25%;
  height: 0;
  position: relative; 
}
.item {
  position: absolute; 
  width: 100%;
  height: 100%;
  background-color: 499e56;
}    
<div class="scale">
     <div class="item">
         这里是所有子元素的容器
     </div>
 </div>

34、transfrom的rotate属性在span标签下失效

span {
  display: inline-block
}

35、CSS加载动画

主要是通过css旋转动画的实现：

.dom{
  -webkit-animation:circle 1s infinite linear;
}
@keyframes circle{
  0%{ transform: rotate(0deg); }
  100%{ transform: rotate(360deg); }
}

实现如下效果：

<div class="loader"></div>
<style>
.loader {
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #3498db;
  width: 80px;
  height: 80px;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}

@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
</style>

36、文字渐变效果实现

<div class="text_signature " >fly63前端网，一个免费学习前端知识的网站</div>
<style>
.text_signature {
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-image: linear-gradient(to right, #ec2239, #40a4e2,#ea96f5);
    width: 320px;
}
</style>

37、好看的边框阴影

<div class="text_shadow"></div>
<style> 
.text_shadow{
  width:500px;
  height:100px;
  box-shadow: 0px 0px 13px 1px rgba(51, 51, 51, 0.1);
}
</style>

38、好看的背景渐变

<div class="text_gradient"></div>
<style> 
.text_gradient{
  width:500px;
  height:100px;
  background: linear-gradient(25deg, rgb(79, 107, 208), rgb(98, 141, 185), rgb(102, 175, 161), rgb(92, 210, 133)) rgb(182, 228, 253);
}
</style>

39、实现立体字的效果

<div class="text_solid">有课前端网-web前端技术学习平台</div>
<style> 
.text_solid{
    font-size: 32px;
    text-align: center;
    font-weight: bold;
    line-height:100px;
    text-transform:uppercase;
    position: relative;
  background-color: #333;
    color:#fff;
    text-shadow:
    0px 1px 0px #c0c0c0,
    0px 2px 0px #b0b0b0,
    0px 3px 0px #a0a0a0,
    0px 4px 0px #909090,
    0px 5px 10px rgba(0, 0, 0, 0.6);
}
</style>

40、全屏背景图片的实现

.swper{
  background-image: url(./img/bg.jpg);
  width:100%;
  height:100%;//父级高不为100%请使用100vh
  zoom: 1;
  background-color: #fff;
  background-repeat: no-repeat;
  background-size: cover;
  -webkit-background-size: cover;
  -o-background-size: cover;
  background-position: center 0;
}

41、实现文字描边的2种方法

方式一：

.stroke {
      -webkit-text-stroke: 1px greenyellow;
     text-stroke: 1px greenyellow;
}

方式二：

.stroke {
  text-shadow:#000 1px 0 0,#000 0 1px 0,#000 -1px 0 0,#000 0 -1px 0;
  -webkit-text-shadow:#000 1px 0 0,#000 0 1px 0,#000 -1px 0 0,#000 0 -1px 0;
  -moz-text-shadow:#000 1px 0 0,#000 0 1px 0,#000 -1px 0 0,#000 0 -1px 0;
  *filter: Glow(color=#000, strength=1);
}

42、元素透明度的实现

.dom{
  opacity:0.4;
  filter:alpha(opacity=40); /* IE8 及其更早版本 */
}
使用rgba()设置颜色透明度。

.demo{
  background:rgba(255,0,0,1);
}

说明：RGBA 是代表Red（红色） Green（绿色） Blue（蓝色）和 Alpha（不透明度）三个单词的缩写。

43、解决1px边框变粗问题

.dom{
  height: 1px;
  background: #dbdbdb;
  transform:scaleY(0.5);
}

Ps：出现1px变粗的原因，比如在2倍屏时1px的像素实际对应2个物理像素。

44、CSS不同单位的运算

css自己也能够进行简单的运算，主要是用到了calc这个函数。实现不同单位的加减运算：

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

45、CSS实现文字模糊效果

.vague_text{
  color: transparent; 
  text-shadow: #111 0 0 5px;
}

46、通过滤镜让图标变灰

一张彩色的图片就能实现鼠标移入变彩色，移出变灰的效果。

<a href='' class='icon'><img src='01.jpg' /></a>
<style>
.icon{
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);   
  filter: grayscale(100%);
  filter: gray;
}
.icon:hover{
  filter: none;
  -webkit-filter: grayscale(0%);
}
</style>

47、图片自适应object-fit

当图片比例不固定时，想要让图片自适应，一般都会用background-size:cover/contain，但是这个只适用于背景图。css3中可使用object-fit属性来解决图片被拉伸或是被缩放的问题。使用的提前条件：图片的父级容器要有宽高。

img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

fill: 默认值。内容拉伸填满整个content box, 不保证保持原有的比例。contain: 保持原有尺寸比例。长度和高度中长的那条边跟容器大小一致，短的那条等比缩放，可能会有留白。cover: 保持原有尺寸比例。宽度和高度中短的那条边跟容器大小一致，长的那条等比缩放。可能会有部分区域不可见。（常用）none: 保持原有尺寸比例。同时保持替换内容原始尺寸大小。scale-down:保持原有尺寸比例,如果容器尺寸大于图片内容尺寸，保持图片的原有尺寸，不会放大失真；容器尺寸小于图片内容尺寸，用法跟contain一样。

48、行内标签元素出现间隙问题

方式一：父级font-size设置为0

.father{
 font-size:0;
}

方式二：父元素上设置word-spacing的值为合适的负值

.father{
   word-spacing:-2px
}

其它方案：1将行内元素写为1行(影响阅读)；2使用浮动样式（会影响布局）。

49、解决vertical-align属性不生效

在使用vertical-align:middle实现垂直居中的时候，经常会发现不生效的情况。这里需要注意它生效需要满足的条件：

**作用环境：**父元素设置line-height。需要和height一致。或者将display属性设置为table-cell，将块元素转化为单元格。
**作用对象：**子元素中的inline-block和inline元素。

<div class="box">
  <img src=".\test.jpg"/>
  <span>内部文字</span>
</div>
<style>
.box{
  width:300px; 
  line-height: 300px;
  font-size: 16px; 
}
.box img{
  width: 30px; 
  height:30px; 
  vertical-align:middle
}
.box span{
  vertical-align:middle
}
</style>

PS：vertical-align不可继承，必须对子元素单独设置。同时需要注意的是line-height的高度基于font-size（即字体的高度），如果文字要转行会出现异常哦。

50、手机端页面宽度固定

body {
    overflow-x: hidden;
    overflow-y: auto;
}

51、CSS 去掉input默认样式

input{  
	background:none;  
	outline:none;  
	border:none;
}

如果input必须要有边框，但需要去掉选中时的蓝色框，则：

input{  
	background:none;  
	outline:none;  
	border:1px solid #ccc;
}
input:focus{   
	border:none;
}

51、修改input框里的字体或颜色

/* WebKit browsers */
input::-webkit-input-placeholder {
    color: #C0C0C0;
    font-size: 14px;
}
/* Mozilla Firefox 4 to 18 */
input:-moz-placeholder {
    color: #C0C0C0;
    opacity: 1;
    font-size: 14px;
}
/* Mozilla Firefox 19+ */
input::-moz-placeholder {
    color: #C0C0C0;
    opacity: 1;
    font-size: 14px;
}
/* Internet Explorer 10+ */
input:-ms-input-placeholder {
    color: #C0C0C0;
    font-size: 14px;
}

52、修改input选中时的样式

input:focus { 
　　font-size: 15px; 
　　border: 1px solid red; 
}

给 input 焦点设置颜色，只需给 input 设置 color 属性即可（这样焦点和输入的文字都是一个颜色）

53、页面背景图片固定不随页面滚动

语法：

background-attachment : scroll | fixed 

参数：

scroll : 　背景图像是随对象内容滚动
fixed : 　背景图像固定 

54、css writing-mode文字竖排（解决英文以及间距问题）

文字竖排

writing-mode: vertical-rl;

解决英文竖排问题

text-orientation:upright;

55、cursor自定义图片,使用图像作为光标

h1{
    cursor:url("custom.gif"), auto;

}

56、scroll-behavior

scroll-behavior 属性设置为 smooth 可以轻松实现页面部分之间的平滑滚动：

<nav>
  <h3>Scroll to</h3>
  <a href="#a">A</a>
  <a href="#b">B</a>
  <a href="#c">C</a>
</nav>
<section id="a">
  <h3>A</h3>
</section>
<section id="b">
  <h3>B</h3>
</section>
<section id="c">
  <h3>C</h3>
</section>

html {
  scroll-behavior: smooth;
}
body {
  margin: 0;
  font-family: system-ui;
  color: #fbfbfb;
}
nav {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
}
h3 {
  margin: 0;
  letter-spacing: 1px;
}
a {
  text-decoration: none;
  color: inherit;
  border-bottom: 1px dashed;
}
a + a {
  margin-left: 1em;
}
section {
  width: 100%;
  height: 100vh;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
#a {
  background-color: #1266f1;
}
#b {
  background-color: #00b74a;
}
#c {
  background-color: #f93154;
}

57、caret-color

caret-color 属性设置插入符号的颜色，可见标记 (|) 指示下一个键入的字符将被插入的位置。

textarea {
  caret-color: #00b74a;
}

58、@supports

@supports 规则允许你在使用之前检查浏览器是否支持特定的一个或多个属性（或属性/值组合）。

/* check support for `grid` and `image-rendering` properties */
@supports (display: grid) {
  section {
    display: grid;
  }
}

@supports (image-rendering) {
  img {
    image-rendering: pixelated;
  }
}

59、var（）

var() 函数允许你使用自定义变量的值作为属性值。此函数的第二个可选参数是保留值。

/* define a custom variable - the main background color */
:root {
  --primary-bg-color: #1266f1;
}

/* and use it */
button {
  background-color: var(--primary-bg-color)
}

60、calc（）

calc() 函数用于指定使用大小、角度、时间或数字作为值的属性的计算值。这允许根据不同单位的加减来设置值。

通常，绝对定位的元素水平和垂直对齐如下：

.modal {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

如果我们知道这样一个元素的尺寸，我们可以执行以下操作：

/* let's say an element has a height of 100px and a width of 200px */
.modal {
  position: absolute;
  top: calc(50% - 50px);
  left: calc(50% - 100px);
}

61、attr（）

使用 attr() 函数，你可以检索所选元素的属性值并在样式中使用它。

使用 CSS 创建工具提示：

<p>Some <span data-tooltip="tooltip">text</span> here</p>

p {
  margin: 2em;
  font-size: 1.25rem;
}
span {
  color: #1266f1;
  border-bottom: 1px dashed;
  position: relative;
  cursor: pointer;
}
span::after {
  /*  ---  */
  content: attr(data-tooltip);
  /*  ---  */
  position: absolute;
  top: -1.25em;
  left: 50%;
  transform: translateX(-50%);
  color: #00b74a;
  font-style: italic;
  opacity: 0;
  transition: 0.2s;
}
span:hover::after {
  opacity: 1;
}

62、::marker

我们曾经使用 list-style: none 删除列表标记，并使用 ::before 或 ::after 伪元素添加我们自己的标记。现在有一种更简单的方法可以做到这一点——我们可以使用 ::marker 伪元素。

<ul>
  <li>Prima</li>
  <li>Altera</li>
  <li>Triera</li>
</ul>
li::marker {
  content: "✔ ";
  color: green;
}
li:last-child::marker {
  content: "✖ ";
  color: red;
}

63、::selection

::selection 伪元素允许你设置文本选择的样式。

p::selection {
  background-color: #262626;
  color: #fbfbfb;
}

64、grid + place-items

这种技术允许你仅用两行代码水平和垂直对齐项目。

.parent {
  display: grid;
  place-items: center;
}

place-items 是 justify-items 和 align-items 的简写属性。

此属性可以一次应用于一个或多个（子）单元格。

.parent {
  display: grid;
  grid-template-columns: 1fr 1fr;
  place-items: center
}

65、flex + margin

另一种水平和垂直对齐项目的现代方法是使用 display: flex 和 margin: auto 的组合。

.parent {
  display: flex;
}

.child {
  margin: auto;
}

其实，使用以下代码段可以完成相同的效果：

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

66、flex + gap

Flexbox终于能够使用 gap 属性设置 flex 项之间的间隙

.parent {
  display: flex;
  flex-wrap: wrap;
  gap: 1em;
}

67、inline-flex

此属性允许你创建具有 Flexbox 功能的内联元素。一个例子胜过我说很多话：

<span>👋</span>
<span>👌</span>
<span>👍</span>
<span>👐</span>

body {
  margin: 0;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5em;
  background: #fbfbfb;
}
span {
  width: 2.5em;
  height: 2.5em;
  /* --- */
  display: inline-flex;
  justify-content: center;
  align-items: center;
  /* --- */
  background: #1266f1;
  border-radius: 30%;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  font-size: 1.1rem;
}

68、columns

此技术允许你将文本拆分为列。column-count 属性指定列数，column-gap 设置列间间隙的大小，column-rule 设置列间垂直线的样式。

columns 是 column-count 和 column-width 的简写属性。

<p>
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis reprehenderit inventore ad libero officia, necessitatibus laudantium corporis veniam quae, fugiat dolores quaerat corrupti tempore ipsa consequuntur similique explicabo ducimus commodi expedita. Dolore commodi nesciunt harum? Consequuntur, voluptatibus odio! Maiores non alias autem tempore corrupti, animi accusamus repudiandae nam. Autem at explicabo molestias dignissimos repellendus, magnam laudantium ea quisquam, quam, tenetur adipisci facere quas. Accusantium architecto iste eius tempore consequatur quidem officiis delectus eaque sequi rem! Nesciunt voluptatum tempora voluptatem a sit, minima excepturi quaerat quasi soluta aspernatur quia explicabo incidunt, fugiat animi. Dolor provident corporis magni voluptate vel non earum?
</p>

@import url("https://fonts.googleapis.com/css2?family=Montserrat&display=swap");
body {
  margin: 0;
  background: #262626;
  font-family: "Montserrat", sans-serif;
  color: #fbfbfb;
}
p {
  margin: 1em;
  /* --- */
  column-count: 3;
  column-gap: 2em;
  column-rule: 1px dotted;
  /* --- */
}

@media (max-width: 768px) {
  p {
    column-count: 2;
  }
}

@media (max-width: 512px) {
  p {
    column-count: 1;
  }
}

69、background-repeat

background-repeat 属性设置背景填充指定图像的顺序。round 值在容器的整个宽度上均匀分布图像，而 space 值在图像之间添加少量填充：

<div class="repeat"></div>
<div class="round"></div>
<div class="space"></div>

body {
  margin: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #fbfbfb;
}
div {
  width: 300px;
  height: 64px;
  background-image: url("https://pics.freeicons.io/uploads/icons/png/3733236321617275952-64.png");
}
.repeat {
  background-repeat: repeat;
}
.round {
  background-repeat: round;
}
.space {
  background-repeat: space;
}

70、background-blend-mode

background-blend-mode 属性设置背景图像和颜色（或多个背景图像/颜色）应该相互混合的顺序。

它的一些值：

color、color-burn、color-dodge、darken、difference、exclusion、hard-light、hue、lighten、luminosity、multiply、overlay、saturation、screen、soft-light

你用过 Photoshop 吗？那我想你明白这是怎么回事了。

假设我们有一个想要用作背景的黑白图像。但同时，我们希望它是彩色的。我们怎样才能做到这一点？

<h1>
  look at <br />
  the sky
</h1>

@import url("https://fonts.googleapis.com/css2?family=Audiowide&display=swap");
@keyframes show {
  from {
    opacity: 0;
    transform: scale(0) rotate(-180deg);
  }
  to {
    opacity: 1;
    transform: scale(1) rotate(0);
  }
}
body {
  margin: 0;
  height: 100vh;
  /* --- */
  background: url("https://images.pexels.com/photos/414659/pexels-photo-414659.jpeg?auto=compress&cs=tinysrgb&h=650&w=940"),
    linear-gradient(135deg, skyblue, steelblue 90%);
  background-blend-mode: overlay;
  /* --- */
  background-size: cover;
  display: grid;
  place-items: center;
}
h1 {
  font-family: "Audiowide", cursive;
  color: #00b74a;
  font-size: 4rem;
  text-transform: uppercase;
  text-align: center;
  text-shadow: 0 1px 2px #262626;
  animation: show 2s linear forwards;
}

71、background-clip

background-clip 属性定义了背景颜色或背景图像应该超出元素的内边距的程度。在我看来， text 是这个属性最有趣的值：

<p>nature</p>

72、filter

filter 属性允许你对元素应用一些视觉效果。

它的函数值：

url()

blur()

brightness()

contrast()

drop-shadow()

grayscale()

hue-rotate()

invert()

opacity()

saturate()

sepia()

为懒惰的人更改网站颜色主题（或方案）：

<input type="checkbox" class="theme" />
<p class="text">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam dolores quod debitis veritatis placeat nemo iste natus maxime. Adipisci quos quia veritatis nemo quaerat magnam dolorum tempora voluptatum deleniti consectetur enim ea facere nihil sed ut laborum hic, sapiente vel ratione harum, vero iusto laudantium. Porro accusantium a harum ipsam!
</p>

@import url("https://fonts.googleapis.com/css2?family=Montserrat&display=swap");
body {
  margin: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.theme {
  cursor: pointer;
}
.theme:checked + .text {
  filter: invert();
}
.text {
  margin: 1em;
  padding: 1em;
  background: #262626;
  border-radius: 4px;
  font-family: "Montserrat", sans-serif;
  color: #fbfbfb;
  transition: 0.2s ease-in;
}

73、drop-shadow

设置为 drop-shadow() 的 filter 属性与 box-shadow 属性不同，它在应用效果方面类似，允许你向图像本身（以 PNG 格式）添加阴影，而不是添加到其中的框。

<input type="checkbox" class="theme" />
<p class="text">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam dolores quod debitis veritatis placeat nemo iste natus maxime. Adipisci quos quia veritatis nemo quaerat magnam dolorum tempora voluptatum deleniti consectetur enim ea facere nihil sed ut laborum hic, sapiente vel ratione harum, vero iusto laudantium. Porro accusantium a harum ipsam!
</p>

@import url("https://fonts.googleapis.com/css2?family=Montserrat&display=swap");
body {
  margin: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.theme {
  cursor: pointer;
}
.theme:checked + .text {
  filter: invert();
}
.text {
  margin: 1em;
  padding: 1em;
  background: #262626;
  border-radius: 4px;
  font-family: "Montserrat", sans-serif;
  color: #fbfbfb;
  transition: 0.2s ease-in;
}

74、object-fit

object-fit 属性控制被替换元素的纵横比，例如 img 和 video，如果它们有宽度或高度，以及缩放过程。

例如，缩小值允许你保持图像的纵横比，而不管框大小：

<img src="https://pics.freeicons.io/uploads/icons/png/21088442871540553614-64.png" alt="js" />
<img src="https://pics.freeicons.io/uploads/icons/png/20167174151551942641-64.png" alt="react" />
<img src="https://pics.freeicons.io/uploads/icons/png/191213921552037062-64.png" alt="vue" />

body {
  margin: 0;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1em;
  background-color: #fbfbfb;
}
img {
  width: 100px;
  height: 100px;
  /*  ---  */
  object-fit: scale-down;
  /*  ---  */
  border: 1px dashed #262626;
  border-radius: 4px;
}

object-position 属性用于对齐框内任何选定的替换元素的内容。

75、首字下沉

可以使用::first-letter伪元素对段落添加首字下沉效果。

::first-letter {
  font-size: 250%;
}

76、禁用textarea文本框调整大小

你可以使用resize属性来防止textarea元素调整大小（或将其限制为只能在水平或者垂直一个方向上调整）。

textarea.no-resize {
  resize: none;
}

textarea.horizontal-resize {
  resize: horizontal;
}

textarea.vertical-resize {
  resize: vertical;
}

77、改变输入框光标的颜色

你可以使用caret-color属性更改输入框光标的颜色。

input {
  caret-color: red;
}

78、禁止网页内容选中高亮禁用用户选择

可以使用user-select属性来防止元素被用户选中高亮显示。

.no-highlight {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

79、图像叠加

object-fit属性指定元素的内容应该如何去适应指定容器的高度与宽度。你可以使用object-fit属性创建图像交叠。这在网站上创建稍微复杂一点的图像时，会很有用。

.image-overlay img:only-of-type:nth-child(1) {
  object-fit: cover;
  opacity: .4;
}

80、文本选择颜色

当你访问网站或阅读博客时，你经常使用鼠标选择文本，它只是蓝色选择白色文本。你可以通过自定义文本颜色选择使你的网站脱颖而出。

::selection{
    background-color: #616161;
    color: #e0e0e0;
}

81、默认样式清除

input::-webkit-calendar-picker-indicator{
	display: none;
	-webkit-appearance: none;
}
/*清除ie的默认选择框样式清除，隐藏下拉箭头*/
select {
    /*很关键：将默认的select选择框样式清除*/
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    /*在选择框的最右侧中间显示小箭头图片*/
    /* position: relative; */
    /* background: url("../img/sjx.svg") no-repeat center/contain; */
}
select::-ms-expand {
    display: none;
}
option::-ms-expand {
    display: none;
}
option {
    -moz-appearance: none;
    /* Firefox */
    -webkit-appearance: none;
    /* Safari 和 Chrome */
    appearance: none;
}

82、给文字添加渐变

p {
  font-size: 48px;
  background: -webkit-linear-gradient(#eee, #333);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

83、使用 SVG 遮罩图像

<svg>
<clippath id='clippath'>
/* Enter your svg here*/
</clippath>
</svg>

<style>
img:{
clip-path:url(#clippath)
}
</style>

84、设计视频的字幕

::cue{
    color:green;
    background:red;
}

85、用文字剪辑视频

<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap" rel="stylesheet">
<stye>
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}


.container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 100%;
  height: 500px;
}

.container video {
  width: 100%;
  height: 100%;
}

.container .text {
  position: absolute;
  top: 0;
    line-height: 350px;
  width: 100%;
  height: 100%;
  text-align: center;
  background: #ffffff;
  mix-blend-mode: screen;
  font-size: 15em;
  font-family: 'Bebas Neue', sans-serif;
}
</style>
<div class="container">
  <video autoplay loop muted>
    <source src="https://res.cloudinary.com/dptgkdbjg/video/upload/v1623121486/video_iqbbwc.mp4" type="video/mp4">
  </video>
  <div class="text">
    <p>OCEAN</p>
  </div>
</div>

86、自定义移动浏览器标题中的地址栏

<meta name='theme-color' content='#0575e6' />

87、Safari浏览器手机号码默认样式处理
苹果自带浏览器打开页面，手机号会被变成黑色的文字，而不是css样式里的颜色解决办法：禁止识别手
机号

<meta name="format-detection" content="telephone=no" />

88、safari渲染Transition动画不流畅问题

-webkit-backface-visibility: hidden;
-webkit-transform-style: preserve-3d;

第一行代码是解决闪屏的，第二行代码是解决safari动画过渡不流畅的问题；

89、HTML禁止缩放

禁止缩放

<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />

90.解决 ios audio 无法自动播放、循环播放的问题

ios 手机在使用 audio 或者 video 播放的时候，个别机型无法实现自动播放，可使用下面的代码 hack。

// 解决ios audio无法自动播放、循环播放的问题
var music = document.getElementById( video );
var state = 0;

document.addEventListener( touchstart , function(){
    if(state==0){
        music.play();
        state=1;
    }
}, false);

document.addEventListener("WeixinJSBridgeReady", function () {
    music.play();
}, false);

//循环播放
music.onended = function () {
    music.load();
    music.play();
}