css中clip屬性有什么用

這篇“css中clip屬性有什么用”文章，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要參考一下，對于“css中clip屬性有什么用”，小編整理了以下知識點(diǎn)，請大家跟著小編的步伐一步一步的慢慢理解，接下來就讓我們進(jìn)入主題吧。

成都創(chuàng)新互聯(lián)公司堅(jiān)持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：成都網(wǎng)站制作、成都網(wǎng)站建設(shè)、外貿(mào)營銷網(wǎng)站建設(shè)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿足客戶于互聯(lián)網(wǎng)時(shí)代的鹿寨網(wǎng)站設(shè)計(jì)、移動媒體設(shè)計(jì)的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！

css是什么意思

css是一種用來表現(xiàn)HTML或XML等文件樣式的計(jì)算機(jī)語言，主要是用來設(shè)計(jì)網(wǎng)頁的樣式，使網(wǎng)頁更加美化。它也是一種定義樣式結(jié)構(gòu)如字體、顏色、位置等的語言，并且css樣式可以直接存儲于HTML網(wǎng)頁或者單獨(dú)的樣式單文件中，而樣式規(guī)則的優(yōu)先級由css根據(jù)這個(gè)層次結(jié)構(gòu)決定，從而實(shí)現(xiàn)級聯(lián)效果，發(fā)展至今，css不僅能裝飾網(wǎng)頁，也可以配合各種腳本對于網(wǎng)頁進(jìn)行格式化。

一、css什么是clip屬性？

clip 屬性剪裁絕對定位元素。clip 屬性允許定義一個(gè)元素的可見尺寸，當(dāng)一幅圖像的尺寸大于包含此元素時(shí)，此圖像就會被修剪并顯示為這個(gè)元素定義的形狀。

1.語法

img {
position:absolute;
clip:rect(0px,60px,200px,0px);
}

代碼示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.demo{
				width: 200px;
				height: 500px;
				margin: 50px auto;
			}
			img{
				border: 1px solid #000;
			}
			.img {
				position:absolute;
				clip:rect(0px,165px,200px,34px);
			}
		</style>
	</head>
	<body>
		<div class="demo">
			<h5>原圖：</h5>
			<img src="css.jpg" width="200" height="131" />
			<h5>裁剪后</h5>
			<img class="img" src="css.jpg" width="200" height="131" />
		</div>
	</body>
</html>

效果圖：

css中clip屬性有什么用

clip:rect(0px,165px,200px,34px)中的0px,165px,200px,34px分別對應(yīng)圖片的上，右，下，左四個(gè)方位；clip:rect()需要配合position屬性使用，才能對圖像進(jìn)行裁剪。

注意：

如果先有"overflow：visible"定義了元素，clip屬性就不起作用。
css中的clip:rect()只能在絕對定位的元素上使用，包括fixed屬性的元素，因?yàn)閒ixed也算絕對定位

2.可用性隱藏

根據(jù)上面對top right bottom left的釋義，如果left >= right或者bottom <= top，則元素會被完全裁掉而不可見，即“隱藏”。通過這種方式隱藏的元素是可以被屏幕閱讀器等輔助設(shè)備識別的，從而提高了頁面的可用性。

二、css3制作圓形進(jìn)度條動畫（css3 動畫與clip:rect()結(jié)合使用）

代碼實(shí)例：

<!DOCTYPE html>
<html>

<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>css3制作圓形進(jìn)度條動畫</title>
<style>
* {
margin: 0;
padding: 0;
}

body {
overflow-x: hidden;
overflow-y: scroll;
font-family: MuseoSans, Georgia, "Times New Roman", Times, serif;
font-size: 13px;
color: #444;
border-top: 3px solid #444;
background-color: #E4E6E5;
overflow-x: hidden;
}

section .demo {
width: 530px;
margin: 15em auto;
overflow: hidden;
}

ul.notes {
clear: both;
}

ul.notes li {
float: left;
margin-right: 3em;
display: inline;
}

ul.notes li:last-child {
margin: 0;
}

ul.notes li span.skill {
display: block;
text-align: center;
padding: 10px 0;
text-shadow: 1px 0 0 #FFFFFF;
}

.notesite {
display: inline-block;
position: relative;
width: 1em;
height: 1em;
font-size: 5.4em;
cursor: default;
}

.notesite>.percent {
position: absolute;
top: 20px;
left: 0;
width: 100%;
font-size: 25px;
text-align: center;
z-index: 2;
}

.notesite>.percent .dec {
font-size: 15px;
}

.notesite>#slice {
position: absolute;
width: 1em;
height: 1em;
clip: rect(0px, 1em, 1em, 0.5em);
}

.notesite>#slice.gt50 {
clip: rect(auto, auto, auto, auto);
}

.notesite>#slice>.pie {
position: absolute;
border: 0.1em solid #444;
width: 0.8em;
height: 0.8em;
-moz-border-radius: 0.5em;
-webkit-border-radius: 0.5em;
border-radius: 0.5em;
-webkit-animation: craw 2s linear;
-webkit-animation-iteration-count: 1;
}

@-webkit-keyframes craw {
0% {
clip: rect(0em, 1em, 0em, 0.5em);
}
50% {
clip: rect(0em, 1em, 1em, 0.5em);
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
clip: rect(0em, 1em, 1em, 0em);
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
}
}

li.html .notesite>#slice>.pie {
border-color: #DF6C4F;
}

.notesite.fill>.percent {
display: none;
}

li.html .notesite:before {
background: #DF6C4F;
}
</style>
</head>

<body class="home">
	<div class="wrapper">
		<section>
			<div class="demo">
				<ul class="notes">
					<li class="html">
						<div class="notesite" id="note_0" dir="100">
							<div class="percent"></div>
							<div id="slice" class="gt50">
								<div class="pie fill">
								</div>
							</div>
						</div><span class="skill">HTML</span>
					</li>
				</ul>
			</div>
		</section>
	</div>

</body>

</html>

思路：

1.先畫一個(gè)正方形邊框

2. 通過border-radius屬性使他變成一個(gè)圓（考慮兼容性）

-moz-border-radius: 0.5em;
-webkit-border-radius: 0.5em;
border-radius: 0.5em;

3. 設(shè)置動畫效果，通過改變clip的裁剪位置（與定位結(jié)合）使這個(gè)圓慢慢顯現(xiàn)

@-webkit-keyframes craw {
0% {
clip: rect(0em, 1em, 0em, 0.5em);
}
50% {
clip: rect(0em, 1em, 1em, 0.5em);
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
clip: rect(0em, 1em, 1em, 0em);
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
}
}

以上是“css中clip屬性有什么用”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

網(wǎng)站題目：css中clip屬性有什么用
標(biāo)題路徑：http://muchs.cn/article32/ijdspc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站內(nèi)鏈、關(guān)鍵詞優(yōu)化、軟件開發(fā)、響應(yīng)式網(wǎng)站、靜態(tài)網(wǎng)站、全網(wǎng)營銷推廣

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容