?
This document uses PHP Chinese website manual Release
語法:
clip:auto | <shape>
<shape>:rect(<number>|auto <number>|auto <number>|auto <number>|auto)
默認(rèn)值:auto
適用于:絕對定位元素
繼承性:無
動(dòng)畫性:當(dāng)值為<shape>時(shí)
計(jì)算值:指定的值
媒體:視覺
取值:
auto:對象無剪切
rect(<number>|auto <number>|auto <number>|auto <number>|auto):依據(jù)上-右-下-左的順序提供自對象左上角為(0,0)坐標(biāo)計(jì)算的四個(gè)偏移數(shù)值,其中任一數(shù)值都可用auto替換,即此邊不剪切。
上-左 方位的裁剪:從0開始剪裁直到設(shè)定值,即 上-左 方位的auto值等同于0;
右-下 方位的裁剪:從設(shè)定值開始剪裁直到最右邊和最下邊,即 右-下 方位的auto值為盒子的實(shí)際寬度和高度;
示例:clip:rect(auto 50px 20px auto)
說明:上邊不剪切,右邊從左起第50個(gè)像素開始剪切直至最右邊,下邊從上起第20個(gè)像素開始剪切直至最底部,左邊不剪切
* CSS3新增屬性可能存在描述錯(cuò)誤及變更,僅供參考,持續(xù)更新
說明:
檢索或設(shè)置對象的可視區(qū)域。區(qū)域外的部分是透明的。
這個(gè)屬性將被廢棄,推薦使用 clip-path 代替,在過渡階段,仍然會(huì)存在一段時(shí)間。
必須將position的值設(shè)為absolute或者fixed,此屬性方可使用。
對應(yīng)的腳本特性為clip。
兼容性:
<!DOCTYPE html> <html lang="zh-cmn-Hans"> <head> <meta charset="utf-8" /> <title>clip_CSS參考手冊_web前端開發(fā)參考手冊系列</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í)例