clip: rect(top, right, bottom, left);
rect() 需要四個數字參數， top 為元素左上角往下要裁掉的臨界範圍，也就是往下裁掉 top ， right 為元素左上角往右要裁掉的臨界範圍，也就是往右到 right 為止，其餘裁掉， bottom 為元素左上角往下要裁掉的臨界範圍，也就是往下到 bottom 為止，其餘裁掉， left 為元素左上角往開始裁掉的臨界範圍，也就是往左裁掉 left 。
除了數字之外，也可以使用 auto 關鍵字，交給瀏覽器決定。
舉例如下
div {
width: 300px;
height: 205px;
border: thin solid black;
position: absolute;
clip: rect(10px, 286px, 195px, 10px);
}
/* 《程式語言教學誌》的範例程式
http://pydoing.blogspot.com/
檔名：visual14.css
功能：示範 CSS 2.1 樣式表的使用
作者：張凱慶
時間：西元 2011 年 7 月 */我們以下面的 HTML 文件載入
<html>
<head>
<title>網頁標題</title>
<link rel="stylesheet" type="text/css"
href="visual14.css">
</head>
<body>
<div>
You ever have that feeling where you're not sure if
you're awake or still dreaming?
A prison for your mind.
Free your mind.
Believe the unbelievable.
There is no spoon.
I can only show you the door, you have to walk
through it.
Choice. The problem is choice.
Then tomorrow we may all be dead, but how would that
be different from any other day?
I have dreamed a dream, but now that dream has gone
from me.
Choice is an illusion, created between those with
power, and those without.
Because I choose to.
Everything that has a beginning has an end.</div>
</body>
</html>
<!-- 《程式語言教學誌》的範例程式
http://pydoing.blogspot.com/
檔名：visual14.html
功能：示範 CSS 2.1 樣式表的使用
作者：張凱慶
時間：西元 2011 年 7 月 -->瀏覽器 (broswer) 開啟如下
| 中英文術語對照 | |
|---|---|
| 性質 | property |
| 元素 | element |
| 函數 | function |
| 關鍵字 | keyword |
| 瀏覽器 | broswer |
您可以繼續參考
JavaScript 範例
定位相關
相關目錄
CSS 2.1 快速導覽
HTML, CSS 教材
首頁
參考資料
http://www.w3.org/TR/CSS21/visufx.html
https://developer.mozilla.org/en/CSS/clip
沒有留言:
張貼留言