本篇文章分享8個(gè)CSS開(kāi)發(fā)者必須知道的有趣CSS效果代碼，值得收藏，大家一起來(lái)看看吧！

1 更改輸入框的光標(biāo)顏色

MDN:caret-color 屬性用來(lái)定義插入光標(biāo)（caret）的顏色，這里說(shuō)的插入光標(biāo)，就是那個(gè)在網(wǎng)頁(yè)的可編輯器區(qū)域內(nèi)，用來(lái)指示用戶(hù)的輸入具體會(huì)插入到哪里的那個(gè)一閃一閃的形似豎杠 | 的東西。（學(xué)習(xí)視頻分享：css視頻教程）

例如我們將光標(biāo)設(shè)置為藍(lán)色

input{  caret-color:blue; }

2 一行代碼禁止用戶(hù)選擇文本

  user-select: none;

3 內(nèi)容選中的效果

這里設(shè)置文本選中的顏色是綠色

.div::selection {   background-color: green;   color: #fff; }

4 居中最好用的三行代碼

display: flex;           align-items: center;           justify-content: center;

示例：

 .father{       width: 200px;       height: 200px;       border: solid #000 2px;       display: flex;       align-items: center;       justify-content: center;   }   .child{       width: 50px;       height: 50px;       border: solid red 2px;   }

5 平滑滾動(dòng)

scroll-behavior: smooth;

6 用戶(hù)可調(diào)整元素的大小

 resize: both;

注意：resize除非將overflow屬性設(shè)置為 以外的其他visible值，否則什么都不做，visible是大多數(shù)元素的默認(rèn)值。

 .father{           width: 200px;           height: 200px;           border: solid #000 2px;           display: flex;           align-items: center;           justify-content: center;           resize: both;           overflow: auto;        }

7 圖片作為光標(biāo)

cursor: url(), auto;

8 打字機(jī)效果

.container {         height: 500px;         display: flex;         align-items: center;         justify-content: center;       }        .typing {         width: 220px;         animation: typing 2s steps(8), blink 0.5s step-end infinite alternate;         white-space: nowrap;         overflow: hidden;         border-right: 3px solid;         font-family: monospace;         font-size: 2em;       }        @keyframes typing {         from {           width: 0;         }       }        @keyframes blink {         50% {           border-color: transparent;         }       }

<div class="container">       <div class="typing">我是用打字機(jī)效果</div> </div>