萬盛學電腦網

浏覽��? windows 10 wps office 殺毒軟件 數據��? excel教程 文件管理 word教程 網頁制作 裝機必備軟件 linux教程

萬盛學電腦網 >> 網頁制作 >> DivCSS教程 >> CSS定義雙色水晶文本

CSS定義雙色水晶文本

class="area">

CSS定義雙色水晶文本
原理��?

將二個相同而色彩不同的文字重合在一起，通過分別給其��? clip 屬性，使上面和下面的文字被剪切位置不同，從而產生二種不同的色彩��?

clip : 摘自蘇沈小雨CSS手冊

clip : auto | rect ( number number number number )

參數��?

auto : 對象無剪��?

rect ( number number number number ) :

依據��?-��?-��?-左的順序提供自對象左上角��?(0,0)坐標計算的四個偏移數值，其中任一數值都可用auto替換，即此邊不剪��?

說明��?

檢索或設置對象的可視區域。區域外的部分是透明的��?

必須將position的值設為absolute，此屬性方可使用��?

測試環境��?

Firefox1.5、IE6.0、Opera8.5、IE5.01綠色版通過��?

預覽效果一��?
XML/HTML代碼
<html> <head> <FCK:meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>CSS庫吧</title> <style type="text/css"> body{ margin:0 auto;} #content{ position:relative; height:60px;} .top{ clip: rect(16px auto auto auto); top:10px; left:10px; color:#F00; position:absolute; font:30px "宋體";} .bottom{ clip:rect(0 auto 18px auto);top:10px; left:10px; color:#000; position:absolute; font:30px "宋體";} </style> </head> <body> <div id="content"> <a href="http://www.CSSk8.com/" _fcksavedurl="http://www.CSSk8.com/" class="top">CSS庫吧</a> <a href="http://www.CSSk8.com/" _fcksavedurl="http://www.CSSk8.com/" class="bottom">CSS庫吧</a> </div> </body> </html>
//提示：您可以先修改部分代碼再運行

預覽效果二：

XML/HTML代碼

上一��?:制作CSS半透明效果的浮動層
下一��?:CSS樣式中body樣式控制字體全局樣式

萬盛學電腦網

萬盛學電腦網 >> 網頁制作 >> DivCSS教程 >> CSS定義雙色水晶文本

CSS定義雙色水晶文本

DivCSS教程排行

程序編程推薦

熱門文章

相關文章

圖片文章

實例：html5.js 讓HTML5+CSS3制作的網站兼容ie6,7,8浏覽

FastCGI輕松搞定IIS7.5+PHP5.6.0環境

網頁設計中常見的五種交互設計錯誤

dreamweaver cs6怎麼設置背景音樂有哪些方��?

萬盛學電腦網 | 設為首頁 | 加入收藏