值得收藏的8個實用CSS效果代碼（分享）

本篇文章分享8個CSS開發者必須知道的有趣CSS效果程式碼，值得收藏，大家一起來看看吧！

1 更改輸入框的遊標顏色

##MDN:

caret-color 屬性用來定義插入遊標（caret）的顏色，這裡所說的插入遊標，就是那個在網頁的可編輯器區域內，用來指示使用者的輸入具體會插入到哪裡的那個一閃一閃的形似豎槓 | 的東西。 （學習影片分享：css影片教學）

例如我們將遊標設定為藍色

input{

caret-color:blue;
}

##2 一行程式碼禁止使用者選擇文字

  user-select: none;

#3 內容選取的效果##這裡設定文本選取的顏色是綠色

.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 平滑捲動

scroll-behavior: smooth;

6 使用者可調整元素的大小

 resize: both;

注意：resize

除非將

overflow屬性設定為以外的其他visible值，否則什麼都不做，visible是大多數元素的預設值。

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

      }

7 圖片作為遊標

cursor: url(), auto;

8 打字機效果

.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">我是用打字机效果</div>
</div>

更多程式相關知識，請造訪：程式設計影片

！ ！

以上是值得收藏的8個實用CSS效果代碼（分享）的詳細內容。更多資訊請關注PHP中文網其他相關文章！