css中的clip屬性怎么用

發(fā)布時(shí)間：2022-02-25 11:23:59 來源：億速云閱讀：160 作者：小新欄目：web開發(fā)

這篇文章將為大家詳細(xì)講解有關(guān)css中的clip屬性怎么用，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

　　cssclip屬性用來設(shè)置元素的形狀。用來剪裁絕對(duì)定位元素。當(dāng)一幅圖像的尺寸大于包含它的元素時(shí)，"clip"屬性允許規(guī)定一個(gè)元素的可見尺寸，這樣此元素就會(huì)被修剪并顯示在這個(gè)元素中。

　　使用cssclip屬性需要注意以下三點(diǎn)：

　　1.clip屬性只能用于絕對(duì)定位元素，position:absolute或fixed。

　　2.clip屬性有三種取值：auto默認(rèn)的;inherit繼承父級(jí)的;一個(gè)定義好的形狀，但現(xiàn)在只能是方形的rect(),clip:{shape|auto|inherit}

　　3.shaperect(<top>,<right>,<bottom>,<left>)中的四個(gè)元素不可省略。

　　實(shí)例

　　<!doctypehtml>

　　<html>

　　<head>

　　<metahttp-equiv="Content-type"content="text/htmlcharset=utf-8"/>

　　<metahttp-equiv="X-UA-Compatible"content="IE=edge,chrome=1"/>

　　<styletype="text/css">

　　img{

　　position:absolute;

　　top:0;

　　left:10px;

　　clip:rect(52px,280px,290px,95px);

　　}

　　</style>

　　</head>

　　<body>

　　<imgsrc="00.jpg"/>

　　</body>

　　</html>

關(guān)于“css中的clip屬性怎么用”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。

向AI問一下細(xì)節(jié)

猜你喜歡