如何讓文字擁有漸變效果（限webkit內(nèi)核瀏覽器）
設(shè)計(jì)出了一個(gè)這樣的需求，需要有一個(gè)數(shù)字擁有正常的顏色，但當(dāng)鼠標(biāo)放上去的時(shí)候要變成漸變色，大家都知道，css是沒有顏色漸變這個(gè)屬性的，只有背景顏色的漸變，這里有兩種實(shí)現(xiàn)方法。 1.讓設(shè)計(jì)把字給你摳出來(lái) 這里扣圖片對(duì)于瀏覽器的兼容性非常好，會(huì)兼容基本上所有瀏覽器，圖片可以任意大小，但要求底色與div盒子中底色一致，這樣視覺上不會(huì)有問題，而我們可以直接改變圖片所屬div的背景顏色，就能實(shí)現(xiàn)通...
Less中變量的使用
上一章已經(jīng)簡(jiǎn)單介紹了一下常用的css預(yù)處理器Less。本章我們著重講解一下變量有關(guān)知識(shí)。變量命名規(guī)范：1.必須有 @ 為前綴2.不能包含特殊字符3.不能以數(shù)字開頭4.大小寫敏感變量的基本使用如圖所示：除此之外，變量還可以作為插值使用，變量可以用于選擇器名、屬性名、URL、@import語(yǔ)句。再來(lái)介紹一下變量的延遲加載特性：當(dāng)一個(gè)變量被聲明多次，會(huì)取最后一次的值，并從當(dāng)前作用域往外尋找變量。如以下語(yǔ)...
常見的css預(yù)處理器——Less
在學(xué)習(xí)less之前，我們需要對(duì)css有簡(jiǎn)單的了解，CSS 是一門非程序式語(yǔ)言，沒有變量、函數(shù)、SCOPE（作用域）等概念。CSS 需要書寫大量看似沒有邏輯的代碼，冗余度是比較高的。不方便維護(hù)及擴(kuò)展，不利于復(fù)用。也沒有很好的計(jì)算能力。而Less是一門向后兼容的 CSS 擴(kuò)展語(yǔ)言，也稱為 CSS 預(yù)處理器。在 CSS 的語(yǔ)法基礎(chǔ)上，引入了變量，Mixin，運(yùn)算以及函數(shù)等功能，簡(jiǎn)化了 CSS 的編寫，并...
CSS之vertical-align用法詳解
今天來(lái)介紹css中一個(gè)常用的屬性：vertical-align，vertical-align 屬性主要用來(lái)設(shè)置元素的垂直對(duì)齊方式。注意：vertical-align 屬性只能用于行內(nèi)元素和置換元素（例如 圖像和表單輸入框），此屬性不繼承。vertical-align常用屬性值：baseline：默認(rèn)值， 讓元素的基線與父元素文本的基線對(duì)齊。。top：令元素的頂端對(duì)齊；middle：元素的垂直中心點(diǎn)...
2023-10-21
利用jq和陰影做出消失效果
需求如下： 實(shí)現(xiàn)效果要求鼠標(biāo)通過不同的標(biāo)題時(shí)，根據(jù)索引值呈現(xiàn)不同的下拉條內(nèi)容，如果大家會(huì)自己寫動(dòng)畫的話，實(shí)現(xiàn)效果肯定比使用jq好很多，而且更加靈活。 這里我們先看一下結(jié)構(gòu)。parasitism被隱藏。我們這里需要給parasitism一個(gè)下方10px模糊度為10的灰色陰影 我們引入jQuery，鼠標(biāo)放到導(dǎo)航條上可以使用mouseover與mouseout或者h(yuǎn)over來(lái)實(shí)現(xiàn)，我...
css——flex彈性布局詳解
Flex布局又稱彈性布局，它使用flexbox使得容器有了彈性，更加適應(yīng)各種設(shè)備的不同寬度，而不必依賴于傳統(tǒng)的塊狀布局和浮動(dòng)定位。是CSS3中新增的規(guī)范。任何一個(gè)容器都可以指定為Flex布局。.box行內(nèi)元素也可以使用Flex布局。.box一，容器的6個(gè)屬性：1. flex-direction：用于設(shè)置主軸的方向。它有四個(gè)取值：row（默認(rèn)值）：主軸為水平方向，起點(diǎn)在左端（項(xiàng)目從左往右排列）。ro...
