偷偷摘套内射激情视频,久久精品99国产国产精,中文字幕无线乱码人妻,中文在线中文a,性爽19p

14 個你需要知道的實用CSS技巧

作者：佚名
開發(fā) 前端
讓我們學(xué)習(xí)一些實用的 CSS 技巧，以提升我們的工作效率。這些 CSS 技巧將幫助我們開發(fā)人員快速高效地構(gòu)建項目。

讓我們學(xué)習(xí)一些實用的 CSS 技巧，以提升我們的工作效率。這些 CSS 技巧將幫助我們開發(fā)人員快速高效地構(gòu)建項目。

現(xiàn)在，讓我們開始吧。

1. CSS :in-range 和 :out-of-range 偽類

這些偽類用于在指定范圍限制之內(nèi)和之外設(shè)置輸入樣式。

(a) : 在范圍內(nèi)

如果 input> 元素的當(dāng)前值在 min 和 max 屬性的邊界之間，則該 input> 元素在范圍內(nèi)。

這個偽類可以很容易地確定一個字段的當(dāng)前值是否可以接受。

(b) ：超出范圍

如果 input> 元素的當(dāng)前值超出 min 和 max 屬性的范圍，則該元素超出范圍。

如果字段值超出其范圍，它會向用戶提供視覺指示。

CSS 代碼：

/* in-range */
input:in-range{
background-color: rgba(0, 255, 0, 0.25);
}
/* out-of-range */
input:out-of-range{
background-color: rgba(255, 0, 0, 0.25);
}

輸出：

你應(yīng)該知道這些偽類只適用于有范圍限制的元素。沒有這個限制，元素不能在范圍內(nèi)或超出范圍。

2. grayscale( ) 函數(shù)

我們可以使用值 100% 將圖像從彩色轉(zhuǎn)換為黑白。當(dāng)我們將此值設(shè)置為 0% 時，圖像將保持不變。

使用 100% 的值會將圖像轉(zhuǎn)換為黑白，這意味著照片中不會有顏色。

我們可以使用 0 到 100% 之間的值來創(chuàng)建各種不同的效果。

CSS 代碼：

.grayscale-image{
filter: grayscale(100%);
}

輸出：

3.玻璃效果

我們可以使用幾行代碼將玻璃效果添加到您的下一個項目中。是的，真的就是這么簡單。玻璃效果很漂亮，可以為您的設(shè)計增添優(yōu)雅氣息。

Glass.CSS（地址：https://css.glass/） 是目前最流行的玻璃形態(tài)生成器，我們可以利用它為我們的項目創(chuàng)建 CSS 玻璃效果。我們需要做的就是根據(jù)項目需要調(diào)整一些設(shè)置，然后將 CSS 代碼復(fù)制粘貼到實際開發(fā)的項目中。

CSS 代碼：

.glass-effect{
   -webkit-backdrop-filter: blur(6.2px);
   backdrop-filter: blur(6.2px);
   background: rgba(255, 255, 255, 0.4);
   border-radius: 16px;
   border: 1px solid rgba(255, 255, 255, 0.24); 
}

4. 使用以下 CSS 代碼設(shè)置文本樣式

這些是每個人都應(yīng)該知道的一些非?；镜奈谋緲邮郊记?。但是，還有許多其他高級選項可用。

CSS 代碼：

p{
  font-family: Helvetica, Arial, sans-serif;
  font-size: 5rem;
  text-transform: capitalize;
  text-shadow: 2px 2px 2px pink, 1px 1px 2px pink;
  text-align: center;
  font-weight: normal;
  line-height: 1.6;
  letter-spacing: 2px;
}

5. CSS clamp()函數(shù)

CSS clamp( ) 函數(shù)將值限制在兩個上限和下限之間的范圍內(nèi)。必須有一個首選值、一個最小值和一個最大值。

當(dāng)字體大小根據(jù)視口改變時，Clamp() 會派上用場。

CSS 代碼：

p{
  font-size: clamp(1.8rem, 2.5vw, 2.8rem);
}

6.居中一個div

開發(fā)人員最重要的任務(wù)是使 div 居中。還有很多其他選項可以讓 div 居中。在此示例中，我們使用 CSS flexbox 將 div 水平和垂直居中。

CSS 代碼：

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

7.漸變CSS線性漸變

要創(chuàng)建漸變 CSS 線性漸變，只需使用下面的 CSS 代碼即可。

CSS 代碼：

div {
    background: linear-gradient(35deg, #CCFFFF, #FFCCCC, rgb(204, 204, 255));
    border-radius: 20px;
    width: 70%;
    height: 400px;
    margin: 50px auto;
  }

8. CSS 抖動效果

當(dāng)用戶輸入無效輸入時，此“搖動”動畫效果會搖動輸入字段。它簡單而優(yōu)雅。例如，如果用戶在文本字段中輸入數(shù)字而不是字母，輸入字段將會抖動。

HTML 代碼：

<input id="name" type="text" placeholder="Enter your name" pattern="[A-Za-z]*"/>

CSS代碼：

input:invalid{
      animation: shake 0.2s ease-in-out 0s 2;
      box-shadow: 0 0 0.4em red;
}
  @keyframes shake {
      0% { margin-left: 0rem; }
      25% { margin-left: 0.5rem; }
      75% { margin-left: -0.5rem; }
      100% { margin-left: 0rem; }
}

9.文字溢出

我們可以使用此屬性截斷溢出的文本?？梢允褂檬÷蕴?(...) 或自定義字符串對其進(jìn)行剪輯和顯示。

CSS 代碼：

.text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
  width: 200px;
 }
div.text {
  white-space: nowrap; 
  width: 200px; 
  overflow: hidden;
  text-overflow: ellipsis;
  border: 1px solid #000000;
}  
div.text:hover {
  overflow: visible;
}

10. 'column-count' 屬性

它指定應(yīng)將元素劃分為的列數(shù)。

CSS 代碼：

p{
column-count: 2;
}

圖片

11. CSS 動畫

動畫逐漸改變元素的樣式。只有先指定關(guān)鍵幀才能使用它。關(guān)鍵幀描述動畫元素如何出現(xiàn)在動畫序列中的特定點(diǎn)。

CSS 代碼：

div{
  width: 200px;
  height: 200px;
  background-color: blue;
  animation-name: square;
  animation-duration: 8s;
}
@keyframes square{
  from {background-color: blue;}
  to {background-color: black;}
}

12.陰影效果

使用 CSS，您可以為文本和元素添加效果。將屬性定義為 text-shadow 和 box-shadow。使用 text-shadow 為文本添加陰影，使用 box-shadow 為元素添加陰影。

(i) text-shadow：它給文本一個陰影。

h1{
  color: blue;
  text-shadow: 2px 2px 4px #000000;
}

(ii) box-shadow：用于給元素賦予陰影效果。下面示例中的實際 div 是紫色的，盒子陰影是天藍(lán)色的，并且設(shè)置為向右和底部 10 個像素。

div{
  width: 200px;
  height: 200px;
  padding: 15px;
  background-color: purple;
  box-shadow: 10px 10px skyblue;
}

圖片

13. CSS 裁剪

使用 clip-path 屬性，您可以只顯示元素的一部分，同時隱藏其余部分。

CSS 代碼：

.bg{
  height: 100%;
  width: 100%;
  background-color: rgba(199, 62, 133, 0.9);
  clip-path: polygon(100% 0, 100% 0, 100% 51%, 0 100%, 0 90%, 0 52%, 0 51%);
  position: absolute;
}

圖片

Clippy-CSS 剪輯路徑生成器是一種通過將元素剪輯為基本形狀（圓形、橢圓形、多邊形或插圖）或 SVG 源來在 CSS 中創(chuàng)建復(fù)雜形狀的快速簡便的方法。

14. CSS background-blend-mode 屬性

此屬性描述背景顏色和圖像（或兩個圖像）應(yīng)如何混合。

與每個背景圖像相對應(yīng)的混合模式列表構(gòu)成了該值?；旌夏Ｊ街付ū尘皩尤绾位旌希伾驁D片）。

您可以使用 background-blend-mode 屬性制作令人驚嘆的背景。

CSS 代碼：

div{
   width: 600px;
   height: 400px;
   background-repeat: no-repeat, repeat;
   background-position: center;
   background-image: url("flower.png"), url("background-image.png");
   background-blend-mode: color;
}

圖片

責(zé)任編輯：華軒 來源： web前端開發(fā)
CSS技巧
相關(guān)推薦

2013-03-04 09:34:48

CSSWeb

2022-07-06 15:51:48

瀏覽器開發(fā)者工具

2022-04-28 12:17:26

瀏覽器連字符hyphens

2020-03-27 12:30:39

python開發(fā)代碼

2023-02-13 15:09:01

開發(fā)webCSS技巧

2018-09-10 09:26:33

2024-04-03 10:29:13

JavaScrip優(yōu)化技巧

2023-03-19 16:02:33

JavaScrip技巧編程語言

2022-12-12 13:19:11

Vue3開發(fā)技巧

2023-03-31 08:10:50

2012-04-09 13:16:20

DIVCSS

2022-11-01 15:57:44

2021-11-16 08:13:30

CSS 技巧工程化技術(shù)

2021-12-09 11:30:46

CSS技術(shù)前端

2011-09-20 10:56:35

云計算PaaS

2022-08-10 09:03:35

TypeScript前端

2022-04-29 09:00:00

Platform架構(gòu)內(nèi)核線程

2021-12-08 23:38:25

Python工具代碼

2013-07-11 13:56:37

大數(shù)據(jù)

2018-03-08 08:04:53

JavaScript反調(diào)試惡意軟件
點(diǎn)贊
收藏

51CTO技術(shù)棧公眾號