資訊專欄INFORMATION COLUMN
摘要：層疊即表示允許以多種方式來描述樣式，一個(gè)元素可以被渲染呈現(xiàn)出多種樣式?？梢宰寣傩缘淖兓^程持續(xù)一段時(shí)間，而不是立即生效。比如，將元素的顏色從白色改為黑色，通常這個(gè)改變是立即生效的，使用后，將按一個(gè)曲線速率變化。
CSS 的全稱是 Cascading Style Sheets，即層疊樣式表， 是一種樣式表語言，用來描述 HTML 或 XML（包括如 SVG、XHTML 之類的 XML 分支語言）元素所呈現(xiàn)的樣式。
“層疊”即表示允許以多種方式來描述樣式，一個(gè) HTML 元素可以被渲染呈現(xiàn)出多種樣式。
下面就讓我們來看看 CSS 可以有多神奇吧。
CSS 基礎(chǔ)特性在開始之前，我們先來了解一下 CSS 的歷史。
CSS簡史（譯）
html和css是那么密不可分，以至于你可能會(huì)覺得它們是一起出現(xiàn)的。實(shí)際上，自1989年Tim Berners Lie發(fā)明互聯(lián)網(wǎng)后的多年中，這個(gè)世界上都不存在一個(gè)名為css的事物，web的原始版本根本就沒有提供一種裝飾網(wǎng)頁的方法。
你不知道的CSS
這篇文章整理了一些實(shí)用的CSS技巧，來解決我們?cè)趯?shí)際項(xiàng)目開發(fā)中遇到的的問題。每個(gè)技巧將結(jié)合demo或者圖示來說明。也許你此刻正在發(fā)愁的一個(gè)bug可以在這里找到答案?。
css三角形繪制方法總結(jié)
在做UI（頁面重構(gòu)）的時(shí)候，免不了和各種小圖標(biāo)打交道，這其中最多的應(yīng)該是三角形以及箭頭，一般情況下可以通過偽類使用unicode解決大部分問題。
現(xiàn)在我們來總結(jié)下幾種使用css繪制三角形的方法。
奇妙的 CSS shapes(CSS圖形)
CSS 發(fā)展到今天已經(jīng)越來越強(qiáng)大了。其語法的日新月異，讓很多以前完成不了的事情，現(xiàn)在可以非常輕松的做到。今天就向大家介紹幾個(gè)比較新的強(qiáng)大的 CSS 功能：
clip-path
shape-outside
不可思議的CSS之clip-path
聊聊clip-path
CSS技巧（一）：背景與邊框
css filter濾鏡的實(shí)例講解
動(dòng)起來CSS3熱身實(shí)戰(zhàn)--過渡與動(dòng)畫（實(shí)現(xiàn)炫酷下拉，手風(fēng)琴，無縫滾動(dòng)）
css3，給我的感覺就是，不難，但是很難玩轉(zhuǎn)自如。今天，就用css3來實(shí)現(xiàn)三個(gè)特效，希望這三個(gè)特殊能讓大家受到啟發(fā)，利用css3做出更好，更炫的動(dòng)畫效果，并且對(duì)比這三個(gè)特效和JS特效的對(duì)比，希望能幫助到是大家學(xué)到CSS3的一些知識(shí)。
CSS3 過渡
CSS 過渡（ transition ）用來控制 CSS 屬性的變化速率。 可以讓屬性的變化過程持續(xù)一段時(shí)間，而不是立即生效。比如，將元素的顏色從白色改為黑色，通常這個(gè)改變是立即生效的，使用 transition 后，將按一個(gè)曲線速率變化。這個(gè)過程可以自定義。
如何只用 CSS 完成漂亮的加載
只想說, 本文最重要的是對(duì) CSS, 偽元素, keyframe的分享, 以及讀者對(duì)這些東西的真正掌握, 我并不是慫恿大家在每一個(gè)頁面的前面都去加一個(gè)酷炫的加載
純 CSS 實(shí)現(xiàn)波浪效果！
原理十分簡單，我們都知道，一個(gè)正方形，給它添加 border-radius: 50%，將會(huì)得到一個(gè)圓形。
我們讓上面這個(gè)圖形滾動(dòng)起來(rotate)
【小程序可用】CSS3 animation 實(shí)現(xiàn)的跑馬燈
CSS 黑科技微信小程序現(xiàn)在實(shí)際上還是用的webview，里面搞動(dòng)畫效率最高的莫過于使用CSS3的animation了。
新手玩CSS中的一些黑科技
鼠標(biāo)移進(jìn)網(wǎng)頁里，不見了
簡單的文字模糊效果
多重邊框
實(shí)時(shí)編輯CSS
CSS中簡單運(yùn)算
border-radius
outline-offset
最后獻(xiàn)上一同事實(shí)習(xí)前的大白demo
黑科技：CSS定制多行省略
當(dāng)字?jǐn)?shù)多到一定程度就顯示省略號(hào)點(diǎn)點(diǎn)點(diǎn)。最初只是簡單的點(diǎn)點(diǎn)點(diǎn)，之后花樣越來越多，點(diǎn)點(diǎn)點(diǎn)加下箭頭，點(diǎn)點(diǎn)點(diǎn)加更多，點(diǎn)點(diǎn)點(diǎn)加更多加箭頭...。多行省略就是大段文字后面的花式點(diǎn)點(diǎn)點(diǎn)。
CSS五種方式實(shí)現(xiàn)Footer置底
頁腳置底（Sticky footer）就是讓網(wǎng)頁的footer部分始終在瀏覽器窗口的底部。
當(dāng)網(wǎng)頁內(nèi)容足夠長以至超出瀏覽器可視高度時(shí)，頁腳會(huì)隨著內(nèi)容被推到網(wǎng)頁底部；但如果網(wǎng)頁內(nèi)容不夠長，置底的頁腳就會(huì)保持在瀏覽器窗口底部。
純CSS實(shí)現(xiàn)網(wǎng)站常用的五角星評(píng)分和分?jǐn)?shù)展示交互效果
最近做的一個(gè)項(xiàng)目涉及到評(píng)分和展示分?jǐn)?shù)的模塊，UI設(shè)計(jì)師也給了幾個(gè)切好的圖片，實(shí)現(xiàn)五角星評(píng)分方式很多，本質(zhì)愛折騰的精神和對(duì)性能追求以及便于維護(hù)的考慮，搜集和嘗試了很多方式，最終采用了純css驅(qū)動(dòng)的實(shí)現(xiàn)方式完成評(píng)分和展示分?jǐn)?shù)的功能，沒有js,也就意味著沒判斷邏輯，代碼出錯(cuò)的幾率更少，也更便于維護(hù)，在此，把這個(gè)功能的實(shí)現(xiàn)的過程記錄和分享一下，一起學(xué)習(xí)交流。
CSS標(biāo)題線（刪除線貫穿線效果）實(shí)現(xiàn)之一二
所以這個(gè)問題是：因屏幕的伸展收縮會(huì)導(dǎo)致內(nèi)容區(qū)所能容納的內(nèi)容不一，從而導(dǎo)致高度不一，各個(gè)元素也是隨著屏幕時(shí)高時(shí)底，背景色的用法無法生效，有何好的解決辦法？
使用 CSS overscroll-behavior 控制滾動(dòng)行為：自定義下拉刷新和溢出效果
CSS 的新屬性 overscroll-behavior 允許開發(fā)者覆蓋默認(rèn)的瀏覽器滾動(dòng)行為，一般用在滾動(dòng)到頂部或者底部。
CSS3實(shí)現(xiàn)音量控制動(dòng)畫
css實(shí)現(xiàn)邊框動(dòng)畫效果
簡單說 用CSS做一個(gè)魔方旋轉(zhuǎn)的效果
用css3做一個(gè)求婚小動(dòng)畫
巧妙使用transform實(shí)現(xiàn)環(huán)形路徑平移動(dòng)畫
手把手教你打造一個(gè)純CSS圖標(biāo)庫
CSS3 巧妙實(shí)現(xiàn)聊天氣泡
帶你玩轉(zhuǎn)css3的3D！
一個(gè)純CSS3實(shí)現(xiàn)的酷炫翻書效果
純css無縫滾動(dòng)
來畫畫吧[譯]我是如何開始制作CSS圖片的
【二次元的CSS】—— 用 DIV + CSS3 畫大白（詳解步驟）
【二次元的CSS】—— 用 DIV + CSS3 畫Hello Kitty（詳解步驟）
【二次元的CSS】—— 用 DIV + CSS3 畫咸蛋超人（詳解步驟）
【二次元的CSS】—— 用 DIV + LESS 做一個(gè)小黃人構(gòu)造器
【二次元的CSS】—— 用 DIV + CSS3 畫小丸子和爺爺
本期完
:）
歡迎關(guān)注 SegmentFault 微信公眾號(hào) :)
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/112804.html
摘要：入門，第一個(gè)這是一門很新的語言，年前后正式公布，算起來是比較年輕的編程語言了，更重要的是它是面向程序員的函數(shù)式編程語言，它的代碼運(yùn)行在之上。它通過編輯類工具，帶來了先進(jìn)的編輯體驗(yàn)，增強(qiáng)了語言服務(wù)。 showImg(https://segmentfault.com/img/bV1xdq?w=900&h=385); 新的一年不知不覺已經(jīng)到來了，總結(jié)過去的 2017，相信小伙們一定有很多收獲...
摘要：入門，第一個(gè)這是一門很新的語言，年前后正式公布，算起來是比較年輕的編程語言了，更重要的是它是面向程序員的函數(shù)式編程語言，它的代碼運(yùn)行在之上。它通過編輯類工具，帶來了先進(jìn)的編輯體驗(yàn)，增強(qiáng)了語言服務(wù)。 showImg(https://segmentfault.com/img/bV1xdq?w=900&h=385); 新的一年不知不覺已經(jīng)到來了，總結(jié)過去的 2017，相信小伙們一定有很多收獲...
摘要：入門，第一個(gè)這是一門很新的語言，年前后正式公布，算起來是比較年輕的編程語言了，更重要的是它是面向程序員的函數(shù)式編程語言，它的代碼運(yùn)行在之上。它通過編輯類工具，帶來了先進(jìn)的編輯體驗(yàn)，增強(qiáng)了語言服務(wù)。 showImg(https://segmentfault.com/img/bV1xdq?w=900&h=385); 新的一年不知不覺已經(jīng)到來了，總結(jié)過去的 2017，相信小伙們一定有很多收獲...
閱讀 1627·2021-11-22 13:53
閱讀 2867·2021-11-15 18:10
閱讀 2768·2021-09-23 11:21
閱讀 2515·2019-08-30 15:55
閱讀 486·2019-08-30 13:02
閱讀 764·2019-08-29 17:22
閱讀 1709·2019-08-29 13:56
閱讀 3462·2019-08-29 11:31
