-moz-border-radius: 100px / 50px;-webkit-border-radius: 100px / 50px;width: 0px;border-width: 50px 18px 0;border-width: 0 45px 35px;-moz-border-radius: 50px 50px 0 0;-moz-border-radius: 50px 50px 0 50px;-moz-border-radius: 50px 50px 50px 0;-webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px;border-width: 0 25px 25px 25px;border-width: 70px 50px 0 50px;border-width: 2px 2px 50px 2px;

CSS3 Filter的十種特效。其默認(rèn)值是none，他不具備繼承性，其中filter-function一個具有以下值可選：grayscale灰度sepia褐色（求專業(yè)指點翻譯）saturate飽和度hue-rotate色相旋轉(zhuǎn)invert反色opacity透明度brightness亮度contrast對比度blur模糊drop-shadow陰影瀏覽器的兼容性。.custom{ -webkit-filter:saturate(5) hue-rotate(500deg) grayscale(0.3) sepia(0.7) contrast(1.5) invert(0.2) brightness(.9);

解決IE(IE6/IE7/IE8)不兼容HTML5標(biāo)簽的方法。如果是IE9以下的IE瀏覽器將創(chuàng)建HTML5標(biāo)簽， 這樣非IE瀏覽器就會忽視這段代碼，也就不會有無謂的http請求了。--[if lt IE9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><!但是如果ie6/7/8 禁用腳本的用戶,那么就變成了無樣式的"白板"網(wǎng)頁,我們該怎么解決呢?--[if lte IE 8]> <noscript> <style>.html5-wrappers{display:none!

定義文檔兼容性，讓IE按指定的版本解析我們的頁面 馬上注冊，歡迎加入IT之家社區(qū)大家庭。默認(rèn)情況下，IE8的瀏覽器模式為IE8。在IE8中，IE8兼容性視圖會以IE7文檔模式來顯示網(wǎng)頁，同時會向服務(wù)器發(fā)送IE7的用戶代理字符串。模擬IE7來處理，遵循 <!DOCTYPE> 指令，如果文檔有當(dāng)前有一個合法的<!DOCTYPE>，就使用IE7模式，否者使用Quirks模式（Internet Explorer 5 Quirks），對于大部分網(wǎng)站來說，這是首選的兼容性模式。

Ctrl+Shift+L 先選中多行，再按下快捷鍵，會在每行行尾插入光標(biāo)，即可同時編輯這些行。Ctrl+Shift+[ 選中代碼，按下快捷鍵，折疊代碼。Ctrl+Shift+] 選中代碼，按下快捷鍵，展開代碼。Ctrl+Shift+↑ 將光標(biāo)所在行和上一行代碼互換（將光標(biāo)所在行插入到上一行之前）。Ctrl+Shift+↓ 將光標(biāo)所在行和下一行代碼互換（將光標(biāo)所在行插入到下一行之后）。Ctrl+Shift+D 復(fù)制光標(biāo)所在整行，插入到下一行。Ctrl+Shift+K 刪除整行。

響應(yīng)式網(wǎng)頁設(shè)計:rem、em設(shè)置網(wǎng)頁字體大小自適應(yīng)。/* 10÷16=62.5% */} body{font-size:12px;font-size:1.2rem ;/* 12÷10=1.2 */} p{font-size:14px;font-size:1.4rem;}其實不用太糾結(jié)是默認(rèn)的 font-size:100%，還是設(shè)置為 font-size:62.5%，如果你引入了 CSS 預(yù)處理工具那么自然可以使用默認(rèn)值，如果由于其他原因使用 font-size:62.5% 也無可厚非，完全可以在 body 中重置回你需要的默認(rèn) font-size。

js實現(xiàn)圖片無縫滾動特效。關(guān)于定時器還有一個用法：消除定時器，方法同樣有兩種：clearTimeout 和 clearInterval，它們分別對應(yīng)不同類型的定時器。oUl.style.left = oUl.offsetLeft + speed + ''px'';繼續(xù)滾動就會導(dǎo)致圖片后面出現(xiàn)空白，就不是循環(huán)滾動的效果了，其實這點也是程序的關(guān)鍵所在，每當(dāng)圖片滾動到圖（2）這種情況時，就應(yīng)該讓圖片重新回到圖（1）那種狀態(tài)再繼續(xù)滾動，這樣的話就形成了無縫循環(huán)滾動的效果。

這就需要看懂網(wǎng)頁的html代碼了，需要分析每一個模塊使用的div，例如頭部的div、導(dǎo)航欄的div、正文的div、側(cè)欄的div、頁腳的div，然后，我們就使用css隱藏不用顯示的div，代碼很簡單，就是display:none。/* 網(wǎng)頁全屏顯示 */ body {width:100%;}<style type="text/css"> /* 默認(rèn)隱藏手機版頭部、導(dǎo)航和頁腳 */#divHead_mobile{display:none}#divNav_mobile{display:none}#divBottom_mobile{display:none}@media(max-width:960px){

img { max-width: 100%;現(xiàn)在，讓我們使用強大的 CSS3 來為匹配 min-device-width 條件的媒體指定替換圖像：@media (min-device-width:600px) { img[data-src-600px] { content: attr(data-src-600px, url); }}@media (min-device-width:800px) { img[data-src-800px] { content: attr(data-src-800px, url); }}令人印象深刻，是不是？@media (min-width: 640px) { body {font-size:1rem;

} }/* Tabled Portrait */@media screen and (max-width: 768px) {#primary { width:100%;img { max-width: 100%;<img src="image.jpg" data-src-600px="image-600px.jpg" data-src-800px="image-800px.jpg" alt="">@media (min-device-width:600px) {img[data-src-600px] {content: attr(data-src-600px, url);}}@media (min-device-width:800px) {img[data-src-800px] {content: attr(data-src-800px, url);padding-top: 30px;

1) 內(nèi)聯(lián)式: 在HTML標(biāo)簽的style屬性中定義樣式，在onclick這樣的屬性中定義Javascript代碼; 2) 嵌入式: 在頁面中使用<style>標(biāo)簽定義樣式，使用<script>標(biāo)簽定義Javascript代碼; 3) 引用外部文件: 在<style>標(biāo)簽中定義href屬性引用CSS文件，在<script>標(biāo)簽中定義src屬性引入Javascript文件.二.用base64圖片編碼替代普通css sprite圖片。一般css sprite用png格式，動畫圖片用gif格式，色彩鮮艷的廣告圖片用jpg.同html和css。

1) 內(nèi)聯(lián)式: 在HTML標(biāo)簽的style屬性中定義樣式，在onclick這樣的屬性中定義Javascript代碼; 2) 嵌入式: 在頁面中使用<style>標(biāo)簽定義樣式，使用<script>標(biāo)簽定義Javascript代碼; 3) 引用外部文件: 在<style>標(biāo)簽中定義href屬性引用CSS文件，在<script>標(biāo)簽中定義src屬性引入Javascript文件.二.用base64圖片編碼替代普通css sprite圖片。一般css sprite用png格式，動畫圖片用gif格式，色彩鮮艷的廣告圖片用jpg.同html和css。

.saturate{-webkit-filter:saturate(0.5);.hue-rotate{-webkit-filter:hue-rotate(90deg);.drop-shadow{-webkit-filter:drop-shadow(5px 5px 5px #ccc);.custom{-webkit-filter:saturate(5) hue-rotate(500deg) grayscale(0.3) sepia(0.7) contrast(1.5) invert(0.2) brightness(.9);doctype html><html><head><meta charset="utf-8"><title>圖片效果</title><style type="text/css">.tu:hover{-webkit-filter: brightness(120%);}

css3 media媒體查詢器用法總結(jié)。這個應(yīng)該算是一個media的一個標(biāo)準(zhǔn)寫法，上面這段CSS代碼意思是：當(dāng)頁面小于960px的時候執(zhí)行它下面的CSS.這個應(yīng)該沒有太大疑問。<link rel="stylesheet" type="text/css" media="screen and (max-width:960px)" href="style.css">上面我們大概講了下CSS2的媒體查詢用法，現(xiàn)在我們重新回到CSS3的媒體查詢，在第一段代碼上面我用的是小于960px的尺寸的寫法，那現(xiàn)在我們來實現(xiàn)等于960px尺寸的代碼：

采用Flex布局的元素，稱為Flex容器（flex container），簡稱”容器”。flex-directionflex-wrapflex-flowjustify-contentalign-itemsalign-content3.1 flex-direction屬性。flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡寫形式，默認(rèn)值為row nowrap。orderflex-growflex-shrinkflex-basisflexalign-self4.1 order屬性。4.3 flex-shrink屬性。flex屬性是flex-grow, flex-shrink 和 flex-basis的簡寫，默認(rèn)值為0 1 auto。

Flex 布局教程：實例篇。上面代碼中，div元素（代表骰子的一個面）是Flex容器，span元素（代表一個點）是Flex項目。<div class="box"> <div class="row"> <span class="item"></span> <span class="item"></span> <span class="item"></span> </div> <div class="row"> <span class="item"></span> </div> <div class="row"> <span class="item"></span> <span class="item"></span> </div></div>HolyGrail-body { display: flex;

淺談css中一個元素如何在其父元素居中顯示。}.box{width: 400px;height: 400px;border:1px solid red;width: 100px;}</style><body> <div class="box"><div class="item"></div> </div></body>3、水平垂直居中（一） 子元素相對于父元素絕對定位，并且margin值減去自己寬高的一半.margin-top: -50px;margin-left: -50px;4、水平垂直居中（二） 子元素相對于父元素絕對定位，并且margin值位auto.}item{width: 100px;

今天給大家?guī)?CSS 三角形繪制方法復(fù)制代碼 代碼如下:#triangle-up { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid red;}復(fù)制代碼 代碼如下:#triangle-left { width: 0; height: 0; border-top: 50px solid transparent; border-right: 100px solid red; border-bottom: 50px solid transparent;}