日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時(shí)間：8:30-17:00
你可能遇到了下面的問題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷解決方案
CSS小知識(shí)，分享14個(gè)你可能還未用上但又實(shí)用的CSS屬性（上）

一、:in-range 和 :out-of-range 偽類

  • :in-range 和 :out-of-range 是 CSS 中的偽類，它們可以用來樣式化表單控件中的輸入值。
  • :in-range 表示當(dāng)前輸入值位于 min 和 max 屬性之間，可以使用它來樣式化合法輸入值。
  • :out-of-range 則表示當(dāng)前輸入值不在 min 和 max 屬性之間，可以使用它來樣式化非法輸入值。

下面 我們來看一段示例，如下代碼所示：

成都創(chuàng)新互聯(lián)公司專業(yè)為企業(yè)提供堆龍德慶網(wǎng)站建設(shè)、堆龍德慶做網(wǎng)站、堆龍德慶網(wǎng)站設(shè)計(jì)、堆龍德慶網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計(jì)與制作、堆龍德慶企業(yè)網(wǎng)站模板建站服務(wù)，10多年堆龍德慶做網(wǎng)站經(jīng)驗(yàn)，不只是建網(wǎng)站，更提供有價(jià)值的思路和整體網(wǎng)絡(luò)服務(wù)。

HTML部分：

CSS部分：

input[type="number"]:in-range {
    background-color: green;
}
input[type="number"]:out-of-range {
    background-color: red;
}

上面這個(gè)示例中，我們有一個(gè)簡(jiǎn)單的表單，其中包含一個(gè)數(shù)字類型的輸入框，它有一個(gè)最小值和最大值限制( min='18', max='65' )。如果用戶在輸入框中輸入的值在這個(gè)范圍內(nèi)，則背景顏色變?yōu)榫G色；如果不在這個(gè)范圍內(nèi)，則背景顏色變?yōu)榧t色。

注：:in-range 和 :out-of-range 偽類是在最新版本的瀏覽器中支持的，包括 Chrome、Firefox、Edge、Safari。在這些瀏覽器中都可以使用這兩個(gè)偽類來樣式化表單控件中的輸入值，并且在這些瀏覽器中都能正常工作。另外，需要注意的是，這兩個(gè)偽類只能應(yīng)用于 input[type='number'] , input[type='range'] 和 input[type='date'] 上，而不能應(yīng)用于其他類型的表單控件上。所以如果你想要使用這兩個(gè)偽類,需要考慮兼容性問題

二、grayscale( ) 顏色變換屬性

grayscale( ) 是 CSS 中的一種顏色變換屬性，用來將圖像變成灰度圖。它可以使用在任何元素上，但最常用于 元素。

語法：

img {
    filter: grayscale(value);
}

value 是一個(gè)百分?jǐn)?shù)值，表示圖像的灰度程度。 0% 表示圖像不變，100% 表示圖像完全變成灰度圖。

示例代碼 ：

img {
    filter: grayscale(50%);
}

上面這個(gè)示例中，所有的 元素都會(huì)變成灰度圖，灰度程度為 50%。

注意：這個(gè)屬性需要在瀏覽器中使用 filter 屬性，并且在老版本的瀏覽器中可能不能使用，所以需要兼容性的處理。 另外，在需要支持無障礙訪問的場(chǎng)景下，使用這個(gè)屬性可能會(huì)導(dǎo)致閱讀障礙，所以需要在使用時(shí)注意可訪問性。

三、Glass Effect 毛玻璃效果

Glass Effect 效果是一種通過模擬玻璃材質(zhì)的效果，在 CSS 中可以通過多種方式實(shí)現(xiàn)。

方法一：一種常見的實(shí)現(xiàn)方式是使用偽元素和漸變顏色，示例代碼如下:

.glass-effect {
    position: relative;
    overflow: hidden;
}
.glass-effect::before {
    content: "";
    position: absolute;
    top: -5px;
    left: -5px;
    right: -5px;
    bottom: -5px;
    background: linear-gradient(rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3)), url(image.jpg);
    filter: blur(5px);
}

上面的代碼中, 我們使用偽元素:before ,并將其設(shè)置在容器的上面，使用漸變顏色和模糊效果來模擬玻璃的效果,通過改變漸變的顏色，模糊的程度來實(shí)現(xiàn)不同的效果。

注意事項(xiàng)：

  • 需要在瀏覽器中支持 filter 屬性
  • 需要兼容性的處理
  • 在需要支持無障礙訪問的場(chǎng)景下，使用這個(gè)效果可能會(huì)導(dǎo)致閱讀障礙，所以需要在使用時(shí)注意可訪問性。

不同的場(chǎng)景需要調(diào)整不同的參數(shù)來實(shí)現(xiàn)不同的效果，可以嘗試使用其他的屬性組合來實(shí)現(xiàn)不同的效果。

方法二：使用 backdrop-filter 屬性

backdrop-filter 屬性是一個(gè)CSS屬性, 可以在元素后面應(yīng)用濾鏡效果. 使用方法類似于 filter 屬性, 但是它應(yīng)用于元素的背景.

.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); 
}

css.glass 這個(gè)網(wǎng)站，目前是最流行的玻璃效果在線代碼生成器，您可以免費(fèi)使用這個(gè)工具創(chuàng)建 CSS 玻璃效果。您需要做的就是根據(jù)您的需要調(diào)整一些設(shè)置，然后將 CSS 代碼復(fù)制粘貼到您的項(xiàng)目中。

四、常用的文本樣式設(shè)置屬性

這些是每個(gè)人都應(yīng)該知道的一些非常基本的文本樣式技巧。但是，還有許多其他高級(jí)選項(xiàng)可用。

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;
}

五、clamp( ) 屬性

clamp() CSS 函數(shù)將值限制在定義的最小邊界和最大邊界之間的值范圍內(nèi)。該函數(shù)采用三個(gè)參數(shù)：最小值、選擇值和最大允許值。

語法：

property: clamp(min, val, max);

min 是長(zhǎng)度值的最小值， max 是最大值， value 是初始選擇值。 clamp( ) 函數(shù)會(huì)返回一個(gè)值，該值大于等于 min 且小于等于 max。

例如當(dāng)字體大小根據(jù)視口改變時(shí)，Clamp() 會(huì)派上用場(chǎng)。

示例代碼 ：

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

這個(gè)字體大小，默認(rèn)為 2.5vw 的大小，當(dāng)視口發(fā)生變化時(shí)，最小為1.8rem，最大為2.8rem。如果計(jì)算的值在1.8~2.8rem之間，則使用自適應(yīng)值 2.5vw。

六、水平垂直居中

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

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

七、CSS線性漸變

在 CSS 中可以使用 linear-gradient() 函數(shù)來實(shí)現(xiàn)線性漸變效果。

相關(guān)語法：

background: linear-gradient(direction, color-stop1, color-stop2, ...);

direction 是漸變的方向，可以是角度值（例如deg）或者關(guān)鍵字（例如to bottom）。 color-stop 是漸變的顏色停止點(diǎn)，可以是顏色值或者顏色值和位置（例如red 20%）。

示例代碼：

.example {
    background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
}

上面的代碼中，我們將 linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet) 應(yīng)用在 .example 元素上，顏色從左往右漸變。

也可以設(shè)置顏色停止點(diǎn)位置

.example {
    background: linear-gradient(to right, red 0%, orange 20%, yellow 40%, green 60%, blue 80%, indigo 100%);
}

還可以設(shè)置漸變的角度

.example {
    background: linear-gradient(45deg, red, orange, yellow, green, blue, indigo, violet);
}

結(jié)束語

今天的上半部分的分享就到這里，感謝你的閱讀，下一篇文章我將會(huì)繼續(xù)分享剩下的7個(gè)屬性，敬請(qǐng)期待。


本文題目：CSS小知識(shí)，分享14個(gè)你可能還未用上但又實(shí)用的CSS屬性（上）
鏈接地址：http://www.5511xx.com/article/cocojcg.html