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