W3C的CSS3規(guī)范仍在開發(fā),但是,許多新的CSS3屬性已在現(xiàn)代瀏覽器使用
CSS3邊框border-radius border-top-left-radius: 2em 0.5em box-shadow:x-shadow y-shadow blur spread(陰影尺寸,可選) color inset(outset外部陰影,可選) border-image border-image-source:設(shè)置或檢索對(duì)象的邊框是否用圖像定義樣式或圖像來(lái)源路徑 border-image-slice:設(shè)置或檢索對(duì)象的邊框背景圖的分割方式 border-image-width:設(shè)置或檢索對(duì)象的邊框厚度 border-image-outset:設(shè)置或檢索對(duì)象的邊框背景圖的擴(kuò)展 border-image-repeat:stretch/repeat/round;設(shè)置或檢索對(duì)象的邊框圖像的平鋪方式CSS3背景
background-image背景圖片 background-color;背景顏色 background-repeat:背景重復(fù) background-position:背景定位 background-attachment:scroll/fixed;背景固定 background-size:x y/100% 100%/cover(比例放大)/contain(包含,圖片不溢出) background-origin:border-box/padding-box/content-box;背景區(qū)域定位 background-clip:border-box/padding-box/content-box/no-clip;背景繪制區(qū)域CSS3漸變
linear-gradient:left/top/right/bottom/left top.../0-360deg(起點(diǎn)/角度),顏色,位置red 50% blue 100% radial-gradient:(起點(diǎn)(圓心位置),形狀/半徑/大小,顏色1,顏色2);徑向漸變 起點(diǎn):left/top/right/bottom 形狀:ellipsis/circle 大小:數(shù)值或百分比 repeating-linear-gradient線性漸變重復(fù)平鋪 IE低版本漸變(濾鏡): filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff",endColorstr="#000000",GradientType="1"); repeating-radial-gradientCSS3字體
@font-faceCSS3 2D轉(zhuǎn)換
transform:translate(),rotate(),scale(),skew(),matrix()CSS3 3D轉(zhuǎn)換
rotateX() rotateY() rotateZ() translateZ() scaleZ()CSS3過(guò)渡
transition:property duration timing-function delay; transition-property:none/all/property transition-duration:time; transition-timing-function:linear/ease/ease-in-out/ease-in/ease-out/cubic-bezier;CSS3動(dòng)畫
@keyframes, animation( animation-name,animation-duration,animation-timing-function,animation-delay,animation-direction,animation-play-state,animation-iteration-count )CSS3多列
column-count column-gap column-rule-style column-rule-width column-rule-color column-rule column-span column-widthCSS3用戶界面
resize box--sizing outline-offsetCSS3框大小
box-sizing:border-box;(content-box)CSS3彈性盒子
display:box或者display:inline-box;設(shè)置給父元素 box-orient:horizontal/vertical;定義盒模型的布局方向,設(shè)置給父元素 box-direction:normal/reverse;元素排列順序,設(shè)置給父元素 box-ordinal-group:number;子元素的顯示次序,設(shè)置給子元素 display:flex;彈性盒子布局 [flex布局教程:語(yǔ)法篇][1] [flex布局教程:實(shí)力篇][2]CSS3多媒體查詢
@media screen and (min-width: 480px)CSS3文本屬性
color:rgba(); text-overflow:是否使用一個(gè)省略標(biāo)記(...)標(biāo)示對(duì)象內(nèi)文本的溢出 text-overflow:clip;//默認(rèn)值,無(wú)省略號(hào) text-overflow:ellipsis//當(dāng)文本溢出時(shí)顯示省略標(biāo)記(...) PS:該屬性需配合overflow:hidden(超出處理)屬性和white-space:nowrap(禁止換行)配合使用,否則無(wú)法看到效果 text-align:文本的對(duì)齊方式 text-align:left/right/center/justify(兩端對(duì)齊);//CSS1 text-align:start(開始邊界對(duì)齊)/end(結(jié)束邊界對(duì)齊);//CSS3 text-transform:文字的大小寫 text-transform:none/capitalize(每個(gè)單詞的第一個(gè)單詞轉(zhuǎn)換成大寫)/uppercase/lowercase;//CSS1 text-transform:full-width(將左右字符設(shè)為全角形式。不支持)/full-size-kana(將所有小假名字符轉(zhuǎn)換成普通假名。不支持) text-decoration:文本的裝飾線 復(fù)合屬性只有火狐支持 text-decoration:text-decoration-line text-decoration-style text-decoration-color blink; 實(shí)例 text-decoration:#f00 double overline; text-shadow:文本陰影 text-shadow:x y blur color; text-fill-color:文字填充顏色 text-stroke:設(shè)置文字的描邊,復(fù)合屬性 text-stroke-width:文字的描邊厚度 text-stroke-color:文字的描邊顏色 tab-size:制表符的長(zhǎng)度 默認(rèn)值為8; word-wrap:當(dāng)前行超過(guò)指定容器的邊界時(shí)是否斷開轉(zhuǎn)行 word-wrap:normal/break-word(允許長(zhǎng)單詞換行到下一行) word-break:規(guī)定自動(dòng)換行的處理方法 word-break:normal/break-all(允許在單詞內(nèi)部換行)/keep-all(只能在半角空格或連字符處換行)CSS偽類選擇器
UI偽類選擇器 :enabled選擇啟用狀態(tài)的元素 :disabled選擇禁用狀態(tài)的元素 :checked選擇被選中的input元素(單選按鈕或復(fù)選框) :default選擇默認(rèn)元素 :valid/invalid根據(jù)輸入驗(yàn)證選擇有效或無(wú)效的input元素 :in-range/out-of-range選擇指定范圍之內(nèi)或者之外受限的元素 :required/optional根據(jù)是否允許:required屬性選擇input元素 動(dòng)態(tài)偽類選擇器 :link選擇鏈接元素 :visited選擇用戶已訪問(wèn)的元素 :hover鼠標(biāo)懸停其上的元素 :active鼠標(biāo)點(diǎn)擊時(shí)觸發(fā)的事件 :focus當(dāng)前獲取焦點(diǎn)的元素 其他偽類選擇器 :not(<選擇器>)對(duì)括號(hào)內(nèi)選擇器的選擇取反 :lang(<目標(biāo)語(yǔ)言>)基于lang全局屬性的元素 :target url片段標(biāo)示符指向的元素 :empty選擇內(nèi)容為空的元素 :selection鼠標(biāo)光標(biāo)選擇元素內(nèi)容
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://systransis.cn/yun/111566.html
摘要:純,不使用,能實(shí)現(xiàn)怎樣的視覺(jué)效果這里收集整理了一些相關(guān)資源與工具,歡迎各位補(bǔ)充。出品的純框架,體積小巧。僅一個(gè)標(biāo)簽實(shí)現(xiàn)的純圖標(biāo)庫(kù)。一個(gè)令人印象深刻的圖片懸停效果集合,完全基于實(shí)現(xiàn)。純模擬移動(dòng)設(shè)備純實(shí)現(xiàn)模態(tài)框使用庫(kù)把圖像轉(zhuǎn)換成屬性。 awesome-pure-css-no-javascript 純 CSS + HTML,不使用 JavaScript,能實(shí)現(xiàn)怎樣的視覺(jué)效果? 這里收集整理...
摘要:純,不使用,能實(shí)現(xiàn)怎樣的視覺(jué)效果這里收集整理了一些相關(guān)資源與工具,歡迎各位補(bǔ)充。出品的純框架,體積小巧。僅一個(gè)標(biāo)簽實(shí)現(xiàn)的純圖標(biāo)庫(kù)。一個(gè)令人印象深刻的圖片懸停效果集合,完全基于實(shí)現(xiàn)。純模擬移動(dòng)設(shè)備純實(shí)現(xiàn)模態(tài)框使用庫(kù)把圖像轉(zhuǎn)換成屬性。 awesome-pure-css-no-javascript 純 CSS + HTML,不使用 JavaScript,能實(shí)現(xiàn)怎樣的視覺(jué)效果? 這里收集整理...
摘要:前綴瀏覽器兼容根據(jù)了解,屬性大部分支持,部分支持,少部分支持前綴蘋果谷歌火狐瀏覽器世界之窗例如兼容轉(zhuǎn)換過(guò)渡關(guān)鍵幀動(dòng)畫轉(zhuǎn)換及以上支持,需添加前綴屬性的方法使用縮放軸縮放倍,軸縮放倍,只有一個(gè)值時(shí)為縮放倍數(shù)傾 css3前綴(瀏覽器兼容) 根據(jù)了解,css3屬性大部分支持ie10,部分支持ie9,少部分支持ie8 // 前綴 // -webkit- Safari and Chrome(...
摘要:動(dòng)畫以低速開始,然后加快,在結(jié)束前變慢。在函數(shù)中自己的值。在所指定的一段時(shí)間內(nèi),在動(dòng)畫顯示之前,應(yīng)用開始屬性值在第一個(gè)關(guān)鍵幀中定義。動(dòng)畫調(diào)用語(yǔ)法 animation: bounceIn 0.3s ease 0.2s 1 both; 按順序解釋參數(shù): 動(dòng)畫名稱 如:bounceIn 一周期所用時(shí)間 如:0.3s 速度曲線 如:ease 值 描述 linear 動(dòng)畫從頭...
閱讀 1484·2019-08-30 15:55
閱讀 1189·2019-08-30 15:52
閱讀 1306·2019-08-29 13:53
閱讀 1480·2019-08-29 11:19
閱讀 2991·2019-08-26 13:29
閱讀 540·2019-08-26 11:33
閱讀 2609·2019-08-23 17:20
閱讀 1036·2019-08-23 14:14