?
? ????? PHP ??? ???? ??? ?? ??
語(yǔ)法:
clip:auto | <shape>
<shape>:rect(<number>|auto <number>|auto <number>|auto <number>|auto)
默認(rèn)值:auto
適用于:絕對(duì)定位元素
繼承性:無(wú)
動(dòng)畫(huà)性:當(dāng)值為<shape>時(shí)
計(jì)算值:指定的值
媒體:視覺(jué)
取值:
auto:對(duì)象無(wú)剪切
rect(<number>|auto <number>|auto <number>|auto <number>|auto):依據(jù)上-右-下-左的順序提供自對(duì)象左上角為(0,0)坐標(biāo)計(jì)算的四個(gè)偏移數(shù)值,其中任一數(shù)值都可用auto替換,即此邊不剪切。
上-左 方位的裁剪:從0開(kāi)始剪裁直到設(shè)定值,即 上-左 方位的auto值等同于0;
右-下 方位的裁剪:從設(shè)定值開(kāi)始剪裁直到最右邊和最下邊,即 右-下 方位的auto值為盒子的實(shí)際寬度和高度;
示例:clip:rect(auto 50px 20px auto)
說(shuō)明:上邊不剪切,右邊從左起第50個(gè)像素開(kāi)始剪切直至最右邊,下邊從上起第20個(gè)像素開(kāi)始剪切直至最底部,左邊不剪切
* CSS3新增屬性可能存在描述錯(cuò)誤及變更,僅供參考,持續(xù)更新
說(shuō)明:
檢索或設(shè)置對(duì)象的可視區(qū)域。區(qū)域外的部分是透明的。
這個(gè)屬性將被廢棄,推薦使用 clip-path 代替,在過(guò)渡階段,仍然會(huì)存在一段時(shí)間。
必須將position的值設(shè)為absolute或者fixed,此屬性方可使用。
對(duì)應(yīng)的腳本特性為clip。
兼容性:
<!DOCTYPE html> <html lang="zh-cmn-Hans"> <head> <meta charset="utf-8" /> <title>clip_CSS參考手冊(cè)_web前端開(kāi)發(fā)參考手冊(cè)系列</title> <meta name="author" content="Joy Du(飄零霧雨), dooyoe@gmail.com, www.doyoe.com" /> <style> .test { position: absolute; height: 50px; line-height: 50px; clip: rect(0 auto 35px 10px); background: #eee; } </style> </head> <body> <div class="test">看看被剪切后的效果</div> </body> </html>
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例