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