萬盛學電腦網

浏覽器 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怎麼設置背景音樂有哪些方式

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