CSS3系列教程:邊框顏色
現在我們來看一看如何為邊框的border-color新增更多的色彩。
使用CSS3的border-radius
屬性,如果你設定了border的寬度是X px,那麼你就可以在這個border上使用X種顏色,每種顏色顯示1px的寬度。如果說你的border的寬度是10個畫素,但是隻聲明瞭5或6中顏色,那麼最後一個顏色將被新增到剩下的寬度。
瀏覽器相容性
只有firefox支援
CSS3中的邊框顏色
這裡是一個10px寬的標準邊框和邊框顏色:
#borderColor { border: 10px solid #dedede; -moz-border-bottom-colors: #300 #600 #700 #800 #900 #A00; -moz-border-top-colors: #300 #600 #700 #800 #900 #A00; -moz-border-left-colors: #300 #600 #700 #800 #900 #A00; -moz-border-right-colors: #300 #600 #700 #800 #900 #A00; padding: 15px 25px; height: inherit; width: 590px; }
有圓角的邊框顏色
#borderColorCorner { border: 10px solid #dedede; -moz-border-radius: 15px; -moz-border-bottom-colors: #303 #404 #606 #808 #909 #A0A; -moz-border-top-colors: #303 #404 #606 #808 #909 #A0A; -moz-border-left-colors: #303 #404 #606 #808 #909 #A0A; -moz-border-right-colors: #303 #404 #606 #808 #909 #A0A; padding: 15px 25px; height: inherit; width: 590px; }
CSS3系列教程|前端觀察
特別宣告,本系列文章譯自:Zen Elements,非常感謝Alex的辛勤工作。
Special Staterment: this series posts were translate from Zen Elements, thanks Alex for his great work so much.
相關推薦
CSS3系列教程:邊框顏色
現在我們來看一看如何為邊框的border-color新增更多的色彩。 使用CSS3的border-radius屬性,如果你設定了border的寬度是X px,那麼你就可以在這個border上使用X種顏色,每種顏色顯示1px的寬度。如果說你的border的寬度是10個畫素,但是隻聲明瞭5
CSS3系列教程:邊框半徑和圓角
頁面中圓角的實現是個很頭疼的問題,雖然現在有很多種實現方法,但是都是比較麻煩的。在本文中,讓我們看看如何使用CSS3 border-radius來實現圓角DIV。 跨瀏覽器相容性 就像在上一篇《CSS3系列教程:簡介》中提到的,並不是所有的瀏覽器支援CSS3,但是那些比較好的瀏覽器選
CSS3系列教程:HSL 和HSLA
使用CSS3 HSL宣告同樣是用來設定顏色的。下一個呢? HSLA? 是的,這個和RGBA的效果是一樣的。 HSL宣告使用色調Hue(H)、飽和度Saturation(s)和亮度Lightness(L)來設定顏色。 Hue衍生於色盤:0和360是紅色,接近120的是綠色,240是藍
CSS3系列教程:多列/多卷
使用CSS3可以為你的網站建立多列,而不用為每列制定特定的層或段落。 與多背景圖片一樣,CSS3多列也是我最喜愛的一個技術。我想這條CSS3屬性有在報紙和雜誌佈局中以外的很多潛在的用途。如果你在某個想法或個人網站中使用了這種方法,請在下面的評論中提交你的連結,我很高興能確認這種方法能用
CSS3系列教程:嵌入字型/網路字型
想要製作一些很酷的頭部效果而且擺脫網站安全字型並且不使用圖片檔案?那麼就使用CSS3嵌入字型吧! 要使用一款字型,我們首先需要使用‘@font-face’屬性。這必須先準備好我們要用的字型檔案。 儘管這樣,讓我們簡單的學習一下字型方面的歷史。@font-face屬性從CSS2就已經考
CSS3系列教程:RGBA
使用新的CSS3的”RGBA”宣告,不僅僅讓我們像通常一樣設定RGB顏色,而且還可以設定其透明度。 RGBA像RGB一樣設定顏色,而這個”A”——RGBA中的最後一個值——允許我們設定該元素的透明度。就像opacity宣告一樣,一個opacity值為1的元素是完全不透明的,而一個opa
CSS3系列教程:背景圖片(背景大小和多背景圖)
背景圖片/紋理有很多種使用方式,常常用於為新增網站的最佳的介面美化。現在它在CSS3中被重視,我們可以應用多背景圖和背景圖片尺寸來實現更完美的效果。 CSS3的背景圖片大小可以寫成 background-size:Apx Bpx; Apx = x軸(圖片寬度) Bpx = y軸
CSS3系列教程:簡介
CSS3不是新事物,更不是隻是圍繞border-radius屬性實現的圓角。它正耐心的坐在那裡,已經準備好了首次登場,呷著咖啡,等著瀏覽器來鋪上紅地毯。你看,瀏覽器需要跟上了…… 注意:瀏覽器需要改進 儘管把玩CSS3是很有趣的事情——就像接下來我要演示的幾篇教程中表現的那樣,但是需
CSS3系列教程:陰影
陰影大約從CSS2就開始有了,但是隻有Safari一個瀏覽器支援它,到現在依然是這樣。陰影在CSS3中可以應用在邊框和文字上,就像圖片的陰影效果一樣。 一般可以分為box-shadow和text-shadow兩類。 CSS3的box-shadow和text-shadow可以寫做:bo
CSS3系列教程:透明度
CSS3透明…不透明…漸變…隨便你怎麼叫它吧!這裡是一些使用CSS3透明度的指南以及一些例子。 其實這個firefox很久以前就支援了,而IE一直不支援! “opacity”宣告用來設定一個元素的透明度:層、文字、圖片等…一個opacity的值為1的元素是完全不透明的,反之,值為0是
VARCHART XGantt系列教程:對外觀使用顏色的技巧
VARCHART XGantt是一款功能強大的甘特圖控制元件。其模組化的設計讓您可以建立滿足您和您的客戶所需求的應用程式。VARCHART XGantt可以快速、簡單地整合到您的應用程式中,幫助您識別效能瓶頸、避免延遲以及高效利用資源,使複雜資料變得更加容易理解。 &
VARCHART XGantt系列教程:如何利用顏色來豐富甘特圖智慧
VARCHART XGantt是一款功能強大的甘特圖控制元件。其模組化的設計讓您可以建立滿足您和您的客戶所需求的應用程式(我們領先的甘特圖控制元件VARCHART XGantt可用於.NET,ActiveX和ASP.NET應用程式)。VARCHART XGantt可以快速、簡單地整合到您的應用程式中
VARCHART XGantt系列教程:使用顏色來定義語義
VARCHART XGantt是一款功能強大的甘特圖控制元件。其模組化的設計讓您可以建立滿足您和您的客戶所需求的應用程式(我們領先的甘特圖控制元件VARCHART XGantt可用於dotnet,ActiveX和ASP.NET應用程式)。VARCHART XGantt可以快速、簡單地整合到您
【教程】Spire.Doc系列教程(1):給Word文件設定背景顏色和背景圖片
使用Spire.Doc,開發人員可以非常方便地給Word文件設定背景顏色和新增背景圖片。以下示例將詳細講述如何使用Spire.Doc給一個現有Word文件設定純色背景顏色,漸變背景顏色以及新增背景圖片。 設定背景顏色 設定純色背景顏色 //建立Document例項 Document doc
從零開始學 Web 之 CSS3(二)顏色模式,文字陰影,盒模型,邊框圓角,邊框陰影
一、顏色模式 顏色模式有兩種: RGBA rgba(0,0,0,0.5); //黑色,透明度0.5 HSLA(顏色(0~360),飽和度(0%~100%),明度(0%~100%),透明度(0~1)) 紅橙黃綠青藍紫紅:顏色從 0~360 順序,各佔30度。比如紅色為0,黃色為120,綠色為240。
CSS3 經典教程系列:CSS3 線性漸變(linear-gradient)
CSS3 Gradient 分為 linear-gradient(線性漸變)和 radial-gradient(徑向漸變)。而我們今天主要是針對線性漸變來剖析其具體的用法。為了更好的應用 CSS3 Gradient,我們需要先了解一下目前的幾種現代瀏覽器的核心,
CSS3系列視訊教程,從入門到精通
給大家分享一篇關於CSS3系列視訊教程。CSS3是什麼呢?CSS3是CSS(層疊樣式表)技術的升級版本,於1999年開始制訂。2001年5月23日W3C完成了CSS3的工作草案,主要包括盒子模型、列表模組、超連結方式、語言模組、背景和邊框、文字特效、多欄佈局等模組。CSS演進
GuozhongCrawler系列教程 (1) 三大PageDownloader
特點 string null 瀏覽器兼容 ror down odi 系列 lan GuozhongCrawler QQ群 202568714 教程源代碼下載地址:http://pan.baidu.com/s/1pJBmerL GuozhongCrawl
Python+Django+SAE系列教程7-----在Sae上配置Django
說明 water 系列教程 font cati 代碼 目錄 教程 本地 本章的開始首先我們來註冊一個sae賬號,首先登錄http://sae.sina.com.cn/。進入登錄頁面,這裏須要一個新浪微博賬號進行註冊。假設沒有趕快去註冊一個吧。 登錄平臺後。會提示一
WCF系列教程之消息交換模式之請求與答復模式(Request/Reply)
人員 point program enabled col ise sleep wds 類型 1、使用WCF請求與答復模式須知 (1)、客戶端調用WCF服務端需要等待服務端的返回,即使返回類型是void (2)、相比Duplex來講,這種模式強調的是客戶端的被動接受,也就是說