2024-04-05 分類: 網(wǎng)站建設(shè)
css3的更新主要包括選擇器、樣式、布局、動(dòng)畫(huà)以及瀏覽器等方面的變化,今天成都做網(wǎng)站公司就對(duì)css3技術(shù)簡(jiǎn)單的分析一下:
1、css3--選擇器
兄弟選擇器--div~img
屬性選擇器--a[href$=`.pdf`], a[href^=`mailto`], a[class=‘item’]
偽類選擇器--:nth-child[n], :nth-last-child[n], :last-child, :checked, :empty, :only-child, :nth-oftype[odd], :nth-of-type[even]
2、css3--樣式
文本換行--word-wrap: normal|break-word
調(diào)整元素尺寸--resize: both|horizontal|vertical
圓角--border-radius: 3px – -moz-border-radius-topleft – -webkit-border-top-left-radius
陰影--box-shadow: 5px 5px 5px rgba[0, 0, 0, 0.5] – text-shadow: 2px 2px #444, 3px 3px #555
漸變--background: -moz-linear-gradient[20%, center, 30%, center, from[blue], to[yellow]] no-repeat;
透明--opacity: 0.5; ? rgba – color: rgba[0, 255, 0, 0.5]; ? hsl/a – color: hsl[240, 50%, 50%]; hsla[240, 50%, 50%, 0.5]
邊框背景--border-image: url[border.png] 27 27 27 27 round round;
背景--background-size: 100px 50px; – background-origin: content-box|border-box|paddingbox; – background-clip: border-box|padding-box
自定義字體--@font-face{ font-family: adam, src:url[adam.ttf]; } p{font-family:adam, serif;}
3、css3--布局
盒模型--box-sizing: content-box|border-box;
網(wǎng)格模型--column-: 3; column-width: 13em; column-gap: 1em; column-rule: 1px solid black;
css table display--#content{display: table;} #main{display: table-cell; width:620px; padding-right: 22px;} #side{display: table-cell; width: 300px;}
outline--outline-offset
4、css3--動(dòng)畫(huà)
變換--transform: rotate[30deg]; – transform: scale[0.5, 2.0]; – transform: skew[-30deg]; – transform: translate[30px, 0];
過(guò)渡--transition: all 1s ease-out ;
動(dòng)畫(huà)--animation: greenpulse infinite ease-in-out 3s;
媒體查詢--.entry{color: red;} @media all adn {min-width: 100em}{ .entry{color: black;} }
語(yǔ)音支持--voice-volume, voice-balance, voice-family
5、ss3的應(yīng)用原則以及瀏覽器前綴
firefox: -moz-box-shadow
safari: -webkit-box-shadow
opera: -o-box-shadow
ie: -ms-box-shadow
優(yōu)雅降級(jí)--對(duì)于不支持css3的瀏覽器可用 javascript來(lái)實(shí)現(xiàn)。
本文標(biāo)題:成都做網(wǎng)站分析css3新功能
鏈接地址:http://www.rwnh.cn/news8/322358.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供服務(wù)器托管、外貿(mào)網(wǎng)站建設(shè)、做網(wǎng)站、手機(jī)網(wǎng)站建設(shè)、移動(dòng)網(wǎng)站建設(shè)、網(wǎng)頁(yè)設(shè)計(jì)公司
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容