css3.0有關(guān)圓角和漸變

IE6,IE7 圓角，顏色漸變都不支持。 IE8 不支持圓角，初步支持 漸變。 IE9 圓角，漸變 都支持，但效果不如 firefox 的好。IE漸變 css 為 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#F0F0F0',endColorstr='#D7D7D7',GradientType=0);

創(chuàng)新互聯(lián)從2013年成立，是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項目成都網(wǎng)站建設(shè)、網(wǎng)站建設(shè)網(wǎng)站策劃，項目實施與項目整合能力。我們以讓每一個夢想脫穎而出為使命，1280元大安市做網(wǎng)站,已為上家服務(wù),為大安市各地企業(yè)和個人服務(wù),聯(lián)系電話:18980820575

IE 9 一下想支持 圓角和漸變（ie8 稍微支持漸變）都只有用 圖片了。希望能有所幫助。

css3中的樣式兼容性問題怎么弄？

1.目前來說對css支持最好的公認(rèn)的是火狐瀏覽器，錯位的原因在css代碼書寫不規(guī)范。

2.兼容性：對于CSS（樣bai式表）并不是所有瀏覽器的所有版本都支持的很好，比如IE5以前的瀏覽器對于CSS的支持就不是很好。而現(xiàn)在使用IE5以前版本瀏覽器的用戶不在少數(shù)，這樣就使得在頁面制作的過程中需要針對不同瀏覽器版本進(jìn)行測試，以保證兼容性，無形中也增加很多工作量（至少我接觸的開發(fā)人員制作div頁面比table頁面的標(biāo)準(zhǔn)時間要長一些）。

3.對css縮寫的支持問題：

不論是ie 還是ff對css的縮寫都有一小點(diǎn)問題比如border: 0xp solid #fff;兩個瀏覽器支持都沒有問題

但對于四個邊的magin不同情況下，就不能用這種縮寫了，無論是ie還是ff又會出現(xiàn)邊界解釋錯誤，而導(dǎo)致頁面變形正確縮寫：border-width:0px 1px 2px 3px;

border-style:solid;

border-color:#fff;

第二點(diǎn)是 ie對于css的magin padding 等默認(rèn)值為0px，但ff卻不一樣，為了保持外觀的統(tǒng)一性，即使padding為0你也要寫上，以免ff在瀏覽中的錯位。

IE與Firefox的CSS兼容大全 1.DOCTYPE 影響 CSS 處理

2.FF: div 設(shè)置 margin-left, margin-right 為 auto 時已經(jīng)居中, IE 不行

3.FF: body 設(shè)置 text-align 時, div 需要設(shè)置 margin: auto(主要是 margin-left,margin-right) 方可居中

4.FF: 設(shè)置 padding 后, div 會增加 height 和 width, 但 IE 不會, 故需要用 !important 多設(shè)一個 height 和 width

5.FF: 支持 !important, IE 則忽略, 可用 !important 為 FF 特別設(shè)置樣式，值得注意的是，一定要將xxxx !important 這句放置在另一句之上

6.div 的垂直居中問題: vertical-align:middle; 將行距增加到和整個DIV一樣高 line-height:200px; 然后插入文字，就垂直居中了。缺點(diǎn)是要控制內(nèi)容不要換行

7.cursor: pointer 可以同時在 IE FF 中顯示游標(biāo)手指狀， hand 僅 IE 可以

8.FF: 鏈接加邊框和背景色，需設(shè)置 display: block, 同時設(shè)置 float: left 保證不換行。參照 menubar, 給 a 和 menubar 設(shè)置高度是為了避免底邊顯示錯位, 若不設(shè) height, 可以在 menubar 中插入一個空格。

9.在mozilla firefox和IE中的BOX模型解釋不一致導(dǎo)致相差2px解決方法：div{margin:30px!important;margin:28px;}

注意這兩個margin的順序一定不能寫反，據(jù)阿捷的說法!important這個屬性IE不能識別，但別的瀏覽器可以識別。所以在IE下其實解釋成這樣：div{maring:30px;margin:28px}

CSS系列篇：CSS3的常見屬性

過渡使用 trainsition 屬性，讓元素的樣式變化，不再瞬間完成，而是可以設(shè)定時間，在時間段內(nèi)逐漸完成。

對單獨(dú)的div元素做分別做設(shè)置進(jìn)行屬性說明：

1、設(shè)置在3秒內(nèi)完成顏色的變化

2、可以分別對不同的屬性分開做時間長度的設(shè)定，記得用逗號隔開

3、延遲delay：想在某個屬性開始執(zhí)行樣式變化后的多少秒，才讓另一個屬性開始進(jìn)行樣式的動態(tài)變化，就可以使用延遲。用法就是：

2s 1s width ,意思就是在高度開始發(fā)生變化后的1s后，width的寬度才開始展現(xiàn)變化，然后在2s內(nèi)完成寬度從30px到60px的變化。

delay的真正意義在于，它指定了動畫發(fā)生的順序，使得多個不同的transition可以連在一起，形成復(fù)雜效果

3、變化的速度：默認(rèn)不設(shè)定，就是逐漸放慢的，默認(rèn)值是ease

還可以額外指定設(shè)置：

linear:勻速

ease-in：加速

ease-out：減速

上述的三個情況，可以綜合寫為：

對應(yīng)的變化就是，div的寬度瞬間變化為60px,然后高度在寬度變化后的1s之后才開始發(fā)生變化，在3秒內(nèi)逐漸加速完成。

重點(diǎn)：

兼容性：各大瀏覽器基本已經(jīng)支持無前綴的transition，所以可以直接使用不加前綴；

transition的變化設(shè)置，是只對有明確數(shù)值設(shè)置變化的，對于none,block這類的文字描述無效；

有效性：transition是一次性的，無法重復(fù)，除非反復(fù)觸發(fā)。

1、相比于過渡屬性transition的設(shè)置，動畫animation的實現(xiàn)支持更為復(fù)雜的動態(tài)樣式效果。

對單獨(dú)的div元素做分別做設(shè)置進(jìn)行屬性說明：

1、使用animation動畫屬性，最重要的就是配合有“關(guān)鍵幀”——@keyframes

樣式設(shè)置如下：

這樣的設(shè)置，就是將1s分為3幀，每幀顯示不同的背景顏色，然后動畫效果只顯示1次。

注意動畫執(zhí)行完成之后，就恢復(fù)元素原來定義的樣式設(shè)置,如果原來沒有這個樣式的定義，那也是動畫執(zhí)行完成后恢復(fù)沒有的狀態(tài)。

@keyframes的寫法比較松泛：

0%等同于from,100%等同于to：

如上面的寫法就等同于：

下面的關(guān)鍵幀的寫法也是有效的：

當(dāng)然，（1）也是有延遲效果的設(shè)置：設(shè)置延遲多少秒后執(zhí)行動畫

（2）每幀之間是平滑過渡的，當(dāng)然也可以設(shè)置為分步過渡，這樣就有卡頓的效果：

解釋：該動畫，在停留1秒后開始執(zhí)行，執(zhí)行3次，每次執(zhí)行時間為2秒，在2秒時間執(zhí)行完成rainbow定義的關(guān)鍵幀樣式，然后分步執(zhí)行，有卡頓效果。

2、動畫持續(xù)：動畫效果默認(rèn)只播放一次，加入infinite關(guān)鍵字，可以讓動畫無限次播放

3、指定動畫播放的次數(shù)，直接寫數(shù)值：

4、如果想要讓動畫結(jié)束后，停留在結(jié)束狀態(tài)的樣式，而不是默認(rèn)變?yōu)槠鹗紶顟B(tài)，就可以添加關(guān)鍵字：

animation-fill-mode屬性：

none：默認(rèn)值，回到動畫沒開始時的狀態(tài)

forwards：讓動畫停留在結(jié)束狀態(tài)

backwards：讓動畫回到第一幀的狀態(tài)

4、如果想要將幀數(shù)的設(shè)置，反向執(zhí)行，就可以使用animation-direction屬性：

normal：動畫循環(huán)播放時，每次都是從結(jié)束狀態(tài)跳回到起始狀態(tài)，再開始播放

reverse：動畫執(zhí)行，先從結(jié)束幀的樣式執(zhí)行跳回到起始幀的樣式。例如：

所有的transform屬性設(shè)置，都不會改變元素占據(jù)的位置，還是保留的

1、旋轉(zhuǎn)rotate

通過rotate設(shè)置旋轉(zhuǎn)角度，來旋轉(zhuǎn)元素

以div元素為例:

···

body

div class="transform"/div

/body

···

2、位移translate

設(shè)置X軸、Y軸方向的位移值

設(shè)置X軸方向的位移值

設(shè)置Y軸方向的位移值

3、縮放scale

設(shè)置元素水平方向和垂直方向同時縮放

設(shè)置元素水平方向縮放

設(shè)置元素垂直方向縮放

只設(shè)置一個參數(shù)，設(shè)置元素水平方向和垂直方向，同一比例同時縮放

4、扭曲：skew，設(shè)置元素的平面XY軸的扭曲角度

設(shè)置元素X軸，Y軸的扭轉(zhuǎn)角度

只設(shè)置一個參數(shù)，元素X軸，Y軸的扭轉(zhuǎn)角度相同

設(shè)置元素X軸的扭轉(zhuǎn)角度

設(shè)置元素Y軸的扭轉(zhuǎn)角度

CSS3中如何實現(xiàn)漸變效果

CSS3里面的線性漸變：linear-gradient

1、語法

2、參數(shù)

第一個參數(shù):指定漸變方向，可以用“角度”的關(guān)鍵詞或“英文”來表示：

第一個參數(shù)省略時，默認(rèn)為“180deg”，等同于“to?bottom”。

第二個和第三個參數(shù)，表示顏色的起始點(diǎn)和結(jié)束點(diǎn)，可以有多個顏色值。

例如：

background-image:linear-gradient(to left, red,orange,yellow,green,blue,indigo,violet);

該屬性已經(jīng)得到了 IE10+、Firefox19.0+、Chrome26.0+ 和 Opera12.1+等瀏覽器的支持。

CSS3都有哪些新特性呢？

第 1 選擇器

第 2 RGBA和透明度

第 3 多欄布局

第 4 多背景圖

第 5 Word Wrap

第 6 文字陰影

第 7 @font-face屬性

第 8 圓角(邊框半徑)

第 9 邊框圖片

第 10 盒陰影

第 11 盒子大小

第 12 媒體查詢

第 13 語音

擴(kuò)展資料:

工作原理

CSS3原理同CSS，是在網(wǎng)頁中自定義樣式表的選擇符，然后在網(wǎng)頁中大量引用這些選擇符[29]。

新增特性中transform的原理較為特殊，雖然使用位移函數(shù)translate()、縮放函數(shù)scale()、旋轉(zhuǎn)函數(shù)rotate()和傾斜函數(shù)skew()可以簡單地實現(xiàn)變形，但是變形中的矩陣函數(shù)都可以使用matrix()函數(shù)來代替。

新增特性

CSS3的新特征有很多，例如圓角效果、圖形化邊界、塊陰影與文字陰影、使用RGBA實現(xiàn)透明效果、漸變效果、使用@Font-Face實現(xiàn)定制字體、多背景圖、文字或圖像的變形處理（旋轉(zhuǎn)、縮放、傾斜、移動）、多欄布局、媒體查詢等。

參考資料:百度百科-css3

css3 選擇不只讀的input標(biāo)記如何用css3樣式做？

偽類選擇器對于大家來說最熟悉的莫過于:link,:focus,:hover之類的了，因為這些在平時中是常用到的偽類選擇器，那么這里就和大家分享一下css3常用偽類選擇改變表單樣式的使用方法

改變input輸入框中placeholder的字體樣式：

:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: #f00; }::-moz-placeholder { /* Mozilla Firefox 19+ */ color: #f00;}input:-ms-input-placeholder,textarea:-ms-input-placeholder { color: #f00;}input::-webkit-input-placeholder,textarea::-webkit-input-placeholder { color: #f00;}

還原移動端按鈕的樣式：-webkit-appearance:none;