中文字幕二区_国产精品免费在线观看_黄色网站观看_人人草人人澡_日本真实娇小xxxx

您的位置: 首頁 > 技術文檔 > 網頁制作 > CSS圓角——圓角化圖片
CSS3變換入門 回到列表 CSS3+HTML5 實現未來Web設計
 CSS圓角——圓角化圖片

作者:by0001 時間: 2010-01-26 文檔類型:原創(chuàng) 來自:藍色理想

在前面一篇文章中,我們將一張上下漸變的的圖片作為標題的背景,并將它應用了圓角效果。是不是這種圓角框只能用于比較單調的圖片呢?我們還能將一些顏色比較豐富的圖片也進行透明圓角化嗎?

答案是肯定的,下面看看它的終極功夫。

還是先看最終效果圖吧

圖一

看到了吧,這就是用純CSS實現的圓角化圖片,為了能看到透明化的效果,我特意應用了一個背景圖片,你可以下載本模型到你的電腦中,隨意伸縮窗口的大小,看看外圓角是否是透明的。

有了這種效果,你再也不愁給每一張圖片作圓角的工作,這種效果在一些圖片類的演示頁面中經常見到,特別適用那些圖片比較多的列表中。怎么樣,效果還可以吧!

好了,我們來看看它的實現機制吧!

實現原理:

這種效果其實就是我在第二章中變體實現,下面講一講主要的關鍵代碼。
主要變化的還是背景圖片的定位,只是這一次與第二章中的有些不同,這次需要考慮到下面的兩個圓角的變化。

先看看上面兩個圓角的實現:

/*圖片偏移定位--上面部分*/
.sharp b.b2{background-position:-4px top;}
.sharp b.b3{background-position:-2px -1px;}
.sharp b.b4{background-position:-1px -2px;}

再看看下面兩個圓角的樣式設置,下面部分和上面部分是相互對應的。

/*圖片偏移定位--下面部分*/
.sharp b.b7{background-position:-4px bottom;}
.sharp b.b6{background-position:-2px bottom;}
.sharp b.b5{background-position:-1px bottom;}

不同的圖片調用樣式:

/*顏色方案一,綠色風格----------------------------------------*/
/*邊框色*/
.color1 .b2,.color1 .b3,.color1 .b4,.color1 .b5,.color1 .b6,
.color1 .b7,.color1 .content{border-color:#262626;}
.color1 .b1,.color1 .b8{background:#262626;}
/*圖片路徑*/
.color1 .b2,.color1 .b3,.color1 .b4,.color1 h3,.color1 .b5,.color1 .b6,.color1 .b7,.color1 .content{background:url(image/1.jpg) no-repeat;}

前面兩句共同構成邊線框的顏色值,需要設置成同一個色值,后面的一句設置圖片的調用路徑。

三句話就搞定一種顏色方案了。

本文鏈接:http://www.95time.cn/tech/web/2010/7366.asp 

出處:藍色理想
責任編輯:bluehearts

◎進入論壇網頁制作WEB標準化版塊參加討論,我還想發(fā)表評論

相關文章 更多相關鏈接
CSS圓角——透明圓角化背景圖片
CSS圓角——基本的圓角框
IE6,7下實現white-space:pre-wrap;
CSS圓角框組件 V1.0
你需要知道的CSS3動畫技術
作者文章 更多作者文章
CSS圓角——透明圓角化背景圖片
CSS圓角——基本的圓角框
CSS圓角框組件 V1.0
不用Cookie的仿刷新二級高亮菜單
無hack并支持透明圓角框九宮格
關鍵字搜索 常規(guī)搜索 推薦文檔
熱門搜索:CSS Fireworks 設計比賽 網頁制作 web標準 用戶體驗 UE photoshop Dreamweaver Studio8 Flash 手繪 CG
站點最新 站點最新列表
周大�!熬�•自然”設計大賽開啟
國際體驗設計大會7月將在京舉行
中國國防科技信息中心標志征集
云計算如何讓安全問題可控
云計算是多數企業(yè)唯一擁抱互聯網的機會
阿里行云
云手機年終巨獻,送禮標配299起
阿里巴巴CTO王堅的"云和互聯網觀"
1499元買真八核 云OS雙蛋大促
首屆COCO桌面手機主題設計大賽
欄目最新 欄目最新列表
淺談JavaScript編程語言的編碼規(guī)范
如何在illustrator中繪制臺歷
Ps簡單繪制一個可愛的鉛筆圖標
數據同步算法研究
用ps作簡單的作品展示頁面
CSS定位機制之一:普通流
25個最佳最閃亮的Eclipse開發(fā)項目
Illustrator中制作針線縫制文字效果
Photoshop制作印刷凹凸字體
VS2010中創(chuàng)建自定義SQL Rule

藍色理想版權申明:除部分特別聲明不要轉載,或者授權我站獨家播發(fā)的文章外,大家可以自由轉載我站點的原創(chuàng)文章,但原作者和來自我站的鏈接必須保留(非我站原創(chuàng)的,按照原來自一節(jié),自行鏈接)。文章版權歸我站和作者共有。

轉載要求:轉載之圖片、文件,鏈接請不要盜鏈到本站,且不準打上各自站點的水印,亦不能抹去我站點水印。

特別注意:本站所提供的攝影照片,插畫,設計作品,如需使用,請與原作者聯系,版權歸原作者所有,文章若有侵犯作者版權,請與我們聯系,我們將立即刪除修改。

您的評論
用戶名:  口令:
說明:輸入正確的用戶名和密碼才能參與評論。如果您不是本站會員,你可以注冊 為本站會員。
注意:文章中的鏈接、內容等需要修改的錯誤,請用報告錯誤,以利文檔及時修改。
不評分 1 2 3 4 5
注意:請不要在評論中含與內容無關的廣告鏈接,違者封ID
請您注意:
·不良評論請用報告管理員,以利管理員及時刪除。
·尊重網上道德,遵守中華人民共和國的各項有關法律法規(guī)
·承擔一切因您的行為而直接或間接導致的民事或刑事法律責任
·本站評論管理人員有權保留或刪除其管轄評論中的任意內容
·您在本站發(fā)表的作品,本站有權在網站內轉載或引用
·參與本評論即表明您已經閱讀并接受上述條款
推薦文檔 | 打印文檔 | 評論文檔 | 報告錯誤  
專業(yè)書推薦 更多內容
網站可用性測試及優(yōu)化指南
《寫給大家看的色彩書1》
《跟我去香港》
眾妙之門—網站UI 設計之道
《Flex 4.0 RIA開發(fā)寶典》
《贏在設計》
犀利開發(fā)—jQuery內核詳解與實踐
作品集 更多內容

雜⑦雜⑧ Gold NORMANA V2