CSS

本文主要對css小技巧進行簡單匯總。具有很好的參考價值，需要的朋友一起來看下吧1、去除input記住密碼後自動填滿表單的黃色背景input:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px #FFF inset; }//其中#fff是背景顏色值2、IE8不支援opacity:0屬性，可以加上下面屬性:filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);3、IE

本篇文章主要介紹了css解決display:inline-block;產生的縫隙（間隙）的方法，具有一定的參考價值，有需要的可以瞭解一下。今天在做H5的水平滑動卡片時用到了display:inline-block;卻發現處在同一水平線上的元素之間居然產生了縫隙，這很顯然不是我想要的效果，所以我就換成了左浮動，這樣縫隙的問題是解決了，但是需要設定父元素的寬度才能實現水平左右滾動，這樣又增加了代碼量，因為卡片的個數不固定，需要即時設定其父元素的寬度，就要用到js，所以代碼量增加了，也不是最好的選擇。

註：由於CSS3的新特性較多，所以分兩篇博文來說明。第一篇主要包括新的選取器、文字及塊陰影、多背景圖、色彩坡形、圓角等。第二篇主要細說CSS3的各種動畫效果，如：旋轉、移動、縮放等，還包括表徵圖字型的應用。CSS3屬性選取器：a[href$=‘.pdf’] 表示 href屬性中以.pdf結尾的被選中a[href^=‘mailto’] 表示href屬性中以mailto開頭的被選中a[href*=‘item’]

簡介animate.css 是一個來自國外的 CSS3 動畫庫，它預設了抖動（shake）、閃爍（flash）、彈跳（bounce）、翻轉（flip）、旋轉（rotateIn/rotateOut）、淡入淡出（fadeIn/fadeOut）等多達 60 多種動畫效果，幾乎包含了所有常見的動畫效果。雖然藉助 animate.css 能夠很方便、快速的製作 CSS3 動畫效果，但還是建議看看 animate.css 的代碼，也許你能從中學到一些東西。相容瀏覽器安全色：當然是只相容支援 CSS3

CSS3

CSS3 動畫通過 CSS3，我們能夠建立動畫，這可以在許多網頁中取代動畫圖片、Flash 動畫以及 JavaScript。CSS3 @keyframes 規則如需在 CSS3 中建立動畫，您需要學習 @keyframes 規則。@keyframes 規則用於建立動畫。在 @keyframes 中規定某項 CSS 樣式，就能建立由當前樣式逐漸改為新樣式的動畫效果。瀏覽器支援Internet Explorer 10、Firefox 以及 Opera 支援 @keyframes 規則和

CSS linear-gradient() 函數建立一個表示顏色線性漸層的 <image> 。該函數的結果是CSS <gradient> 資料類型的對象。像任何其他漸層，CSS線性漸層不是一個CSS <color> ，而是一個沒有內在尺寸的映像; 也就是說，它既不具有 固有的或首選的尺寸，也不具有比率。它的具體尺寸將與其適用的元素的尺寸匹配。線性梯度由一個軸 (梯度線)

上網易前端微專業課程，裡面有一個課外作業是實現一個3D旋轉立方體，花了點時間做了下，還有點意思，寫個簡單教程，供大家學習。 先放上最終要實現的效果 .<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>CSS3 3D立方體多邊形動畫特效 - 代碼筆記</title><style type="

相容多瀏覽器就要為每一個瀏覽器寫對應的 CSS，太低版本的瀏覽器只能使用圖片做背景，下面是當前五大瀏覽器對 gradient 的支援經常有一些時候需要使用漸層背景，使用長條圖片有點太不高大上了，於是自己寫了個小例子，相容多瀏覽器就要為每一個瀏覽器寫對應的 CSS，太低版本的瀏覽器只能使用圖片做背景。 下面是當前五大瀏覽器對 gradient 的支援 代碼如下:<style type="text/css" media="screen">

CSS Margin(外邊距)屬性定義元素周圍的空間。Marginmargin清除周圍的元素（外邊框）的地區。margin沒有背景顏色，是完全透明的margin可以單獨改變元素的上，下，左，右邊距。也可以一次改變所有的屬性。 Margin可以使用負值，重疊的內容。<h2margin -=""

CSS 列表CSS列表屬性作用如下：設定不同的清單項目標記為有序列表設定不同的清單項目標記為無序列表設定清單項目標記為映像列表在HTML中，有兩種類型的列表：無序列表 - 清單項目標記用特殊圖形（如小黑點、小方框等）有序列表 - 清單項目的標記有數字或字母使用CSS，可以列出進一步的樣式，並可用映像作清單項目標記。不同的清單項目標記list-style-type屬性指定清單項目標記的類型是：:執行個體ul.a {list-style-type: circle;}ul.b {list-style-

id 和 class 選取器如果你要在HTML元素中設定CSS樣式，你需要在元素中設定"id" 和 "class"選取器。id 選取器id 選取器可以為標有特定 id 的 HTML 元素指定特定的樣式。HTML元素以id屬性來設定id選取器,CSS 中 id 選取器以 "#" 來定義。以下的樣式規則應用於元素屬性 id="para1":執行個體#para1{text-align:center;color:red;}

CSS3 邊框用CSS3，你可以建立圓角邊框，添加陰影框，並作為邊界的形象而不使用設計程式，如Photoshop。在本章中，您將瞭解以下的邊框屬性：border-radiusbox-shadowborder-image瀏覽器支援屬性瀏覽器支援Internet Explorer 9+ 支援 border-radius 和 box-shadow.Firefox, Chrome, 和 Safari 支援所有最新的 border 屬性.注意：

英文原文： www.456bereastreet.com/archive/200601/css_3_selectors_explained/中文翻譯： www.dudo.org/article.asp?id=197註：本文寫於2006年1月，當時IE7、IE8和Firefox3還未發行，文中所有說的瀏覽器支援均未包括這三個版本的瀏覽器。在IE8和Fir:nth-of-type():nth-of-type()偽類和nth-child()偽類找使用方法十分相似，只不過他匹配的是規則中指明類型的元素。

正如很多小夥伴們所知道的，樓主最近在開發移動端的響應式布局的自適應頁面了，現在分享一個剛寫完的小demohtml:<!doctype html><html lang="en"><head><meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1,

本執行個體是CSS3實現p圓角。實現圓角的CSS3代碼句是： "border-radius: 20px;" 。需使用支援CSS3的瀏覽器運行,例如新版的Chrome、Firefox，或者IE9。IE6、7、8不支援代碼如下:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

CSS3允許我們使用自訂字型 也多了一些不錯的文字效果自訂字型使用自訂字型需要使用@font-face規則 當然首先你要有自訂文字檔案<p class="demo">Payen S.Tsung</p>@font-face { font-family: myDIYfont; /*自訂字型名*/ src: url('Ginga.ttf'); /*字型檔*/}.demo { font-family:

CSS3中增加了可以實現多欄版面配置的屬性 在此之前的實現很麻煩可能需要各種定位 現在我們只需要一個屬性就可以實現 多欄版面配置類似於我們的報紙布局 這樣可以方便讀者觀看多列數量與多列寬度如果一行文字太長的話，我們可能會沒有讀下去的慾望像這樣<p class="demo">......</p>.demo { width: 600px; height: 200px; border: 1px solid

CSS3的形狀變換允許我們對元素展開、縮放等等 這篇我主要談下一2D平面變換 屬性transform可以進行變換 transform就是變形的意思 並且它主要通過函數來使用，有以下函數translate() 平移變換ratate() 旋轉變換scale() 縮放變換skew() 傾斜變換matrix() 矩陣變換transform-origin則時定義變換的中心平移變換translatetranslate()兩個參數，第一個是x軸相對位移，第二個參數是y軸相對位移.demo { .....

可能我們在看一些網頁的源碼時 會發現自己從來沒見過的屬性或用法 今天我就來總結一下 CSS3的冷知識 樣式計算在CSS中也可以進行簡單的計算 通過calc函數可以實現 這樣還可以使我們的元素自適應 當然計算的值應該是合法的值.demo { ... width: calc(100% - 500px); height: 200px;}這個demo中，元素的寬度值是父元素寬度減去500像素 如果父元素是body