10個經典的CSS3屬性介紹 |
作者：佚名 發布時間：2012-02-25 瀏覽：1980次 |
以下內容由寶雞網站建設、寶雞網絡公司---寶雞世紀網絡公司為您搜集整理，我公司公司是寶雞地區專業的網站建設服務提供商，五年建站歷程、六百家客戶的選擇，值得信賴！咨詢熱線0917-3535180 3536690……以下文字為我公司公司原創，如需商業用途或轉載請與我公司公司聯系，謝謝配合！ 1、 border-radius border-radius是一大堆CSS3屬性中最受歡迎的一種，border-radius是CSS3中級別最高的一個屬性。當設計者害怕一個層在將在不同的瀏覽器之間以不同的方式顯示時，CSS圓角，一個很初級的知識，將引導他們開始學習。 我們為移動瀏覽器提供一個備用的觀看體驗的想法都非常好。奇怪的是，當這種方法出現在桌面瀏覽器上時，他們卻又不這么認為。 -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; 注意：請在Safari 5 和 IE9瀏覽器中執行”border-radius”語法。 圓 許多讀者也許不會意識到我們可以用這個屬性來做一個圓。 -moz-border-radius: 50px; -webkit-border-radius: 50px; border-radius: 50px; 如果想再添加點效果，我們可以利用Flexible Box Model（詳情在8中）來使得文字在垂直在水平方向都居中。這需要加點代碼，但這僅僅是對不同瀏覽器的補償。 display: -moz-box; display: -webkit-box; display: box; -moz-box-orient: horizontal; /* the default, so not really necessary here */ -webkit-box-orient: horizontal; box-orient: horizontal; -moz-box-pack: center; -moz-box-align: center; -webkit-box-pack: center; -webkit-box-align: center; box-pack: center; box-align: center; 2、 box-shadow 接下來是非常普遍的box-shadow，可以使你的元素立即美化，只是記得不要把值設得太離譜。 -webkit-box-shadow: 1px 1px 3px #292929; -moz-box-shadow: 1px 1px 3px #292929; box-shadow: 1px 1px 3px #292929; box-shadow的四個參數 x-offset x軸偏移 y-offset y軸偏移 blur 模糊值 color of shadow 陰影顏色 現在，許多人不知道可以一次運用多個box-shadows，這樣做會產生一些有趣的效果。在下圖中，我使用藍色和綠色陰影來放大一下效果。 -webkit-box-shadow: 1px 1px 3px green, -1px -1px blue; -moz-box-shadow: 1px 1px 3px green,-1px -1px blue; box-shadow: 1px 1px 3px green, -1px -1px blue; Clever Shadows The CSS .box:after { content: ’’; position: absolute; z-index: -1; /* hide shadow behind image */ /* The Shadow */ -webkit-box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3); -moz-box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3); -box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3); width: 70%; left: 15%; /* one half of the remaining 30% (see width above) */ height: 100px; bottom: 0; } 3、 text-shadow text-shadow是我們可以省略前綴的幾個CSS屬性之一，類似的還有box-shadow，它必須應用于文本，并它們有相同的四個參數： x-offset 水平位移 y-offest 垂直位移 blur 模糊值 color of shadow 陰影顏色 h1 { text-shadow: 0 1px 0 white; color: #292929; } Text-Outline 和box-shadow一樣，它可以設置多個陰影通過逗號分隔符。例如，我們創建文本框的輪廓，當webkit不支持stroke效果，我們可以使用下面的代碼讓更多的瀏覽器支持（雖然不是很美觀）。 body { background: white; } h1 { text-shadow: 0 1px 0 black, 0 -1px 0 black, 1px 0 0 black, -1px 0 0 black; color: white; } 4、 Text-Stroke 使用這個方法時要注意了，只有webkit（Safari， Chrome， iPhone）在最后的幾年內還支持這個屬性。其實，雖然我可能是錯的，’text-stroke’還不屬于CSS3范疇的一部分。在這種情況下，使用白 色字體時，firefox會顯示一個空白頁面。要解決此問題，你即可以使用javascript，也可以通過使用一種不同于背景顏色的文字顏色。 h1 { -webkit-text-stroke: 3px black; color: white; } Feature Detection 我們如何為firefox提供一組可用的樣式，和為另外的一組Safari或Chrome？解決辦法就是多做測試。 通過feature detection，我們可以利用javascript來測試某屬性是否可用，如果不行，我可就要采用備用的。 再回到text-stroke的問題上，為不支持此屬性的瀏覽器設定一個備用黑色（目前的除webkit外）。 var h1 = document.createElement(’h1’); if ( !( ’webkitTextStroke’ in h1.style ) ) { var heading = document.getElementsByTagName(’h1’)[0]; heading.style.color = ’black’; } 首先我們設定一個h1元素，然后執行，通過樣式屬性以確定-webkit-text-stroke是否支持此元素。如果不支持，我們會把標題由白色設置成黑色。 5、 Multiple Backgrounds Background屬性在CSS3樣式中已經徹底改革，開始支持多背景圖片。 舉個簡單的例子，如果沒和合適的圖像，我們將使用兩個教程的圖像作為我們的背景，當然在程序中你可能會用紋理，也許是漸變作為圖像。 .box { background: url(image/path.jpg) 0 0 no-repeat, url(image2/path.jpg) 100% 0 no-repeat; } 以上，通過逗號分隔符，插入了兩張背景圖像，第一個的定位是（0，0），第二個的定位是（100%，0）。 要確定你對不支持的瀏覽器使用了備用圖片，否則，它將跳此屬性，使背景圖像留空。 對舊瀏覽器的補償 要添加一張單獨的圖像給老瀏覽器用，像IE7。要定義兩遍background，一遍是為老瀏覽器，另一遍是重寫?；蛘吣憧梢栽俅尾榭聪翸odernizr。 .box { /* fallback */ background: url(image/path.jpg) no-repeat; /* modern browsers */ background: url(image/path.jpg) 0 0 no-repeat, url(image2/path.jpg) 100% 0 no-repeat; } 6、 background-size 目前我們已經可以使用這種比較靈活的方式去重定義背景圖像的大小。 background: url(path/to/image.jpg) no-repeat; background-size: 100% 100%; 上面的代碼使得背景圖像已經占據了整個可用空間。但是，如果我們使用一個特殊的圖片去占據body元素的整個空間而無論窗口有多寬，那又怎么做？ body, html { height: 100%; } body { background: url(path/to/image.jpg) no-repeat; background-size: 100% 100%; } 對，就是這么做，分別定義background-size的x，y參數。 最新版本的Chrome 和 Safari支持此屬性，但我們還是要用舊的方法支持舊的瀏覽器。 body {background: url(path/to/image.jpg) no-repeat;-moz-background-size: 100% 100%;-o-background-size: 100% 100%;-webkit-background-size: 100% 100%;background-size: 100% 100%;} 7、 text-overflow 瀏覽器最初開發文本溢出屬性可以設定兩個值：clip ellipsis 此屬性支持切斷容器中的文本，而且也給出了一個省略號的特性。 .box { -o-text-overflow: ellipsis; text-overflow:ellipsis; overflow:hidden; white-space:nowrap; border: 1px solid black; width: 400px; padding: 20px; cursor: pointer; } 或許你會考慮當鼠標經過時顯示全部的文本內容。 #box:hover { white-space: normal; color: rgba(0,0,0,1); background: #e3e3e3; border: 1px solid #666; } 有點奇怪，這看起來并不像是重置text-overflow屬性或是停用它，使之生效，在on:hover中我們可以使得white-space的normal屬性?，F在正常了。 知道嗎？您還可以指定自己的字符串，應使用省略號的位置。這樣做來修飾要顯示的文本字符串。 8、 Flexible Box Model Flexible Box Model將最終使我們遠離類似float的困擾。雖然是要給你的頭部換一個新的屬性，但一旦你這么做了，將終身受益。 做個演示，創建簡單的兩列布局。
首先我們要設定一個容器，然后指定它的寬和高，即便是沒有實質性的內容在里面。 #container { width: 960px; height: 500px; /* just for demo */ background: #e3e3e3; margin: auto; display: -moz-box; display: -webkit-box; display: box; } 接下來分別定義#main和aside的背景色 #main { background: yellow; } aside { background: red; } 到目前為了還沒有看出什么效果來。 值得一提的是，雖然我們設置了display:box模型，它的子元素會占據整個垂直空間。這就是它的默認box-align屬性stretch。 看看有什么效果產生，當我們設置了#main的寬度后。 #main { background: yellow; width: 800px; } 但是我們仍有個疑問，為什么aside不占據剩余的全部空間呢？我們可以用新屬性box-flex來試下。 box-flex 使得元素占據整個空間。 aside { display: block; /* cause is HTML5 element */ background: red; /* take up all available space */ -moz-box-flex: 1; -webkit-box-flex: 1; box-flex: 1; } 使用這個屬性后，不管#main有多寬，aside都將占據整個可用的空間。同時你也不必擔心諸如float等產生的問題，像使得元素被排擠到下一行。 我只是在這兒膚淺的說一下，請參閱保羅愛爾蘭優秀文章的詳細信息。然而，使用此方法的時候也應注意一下兼容問題，例如老的瀏覽器應該先測試下，并且提供必要的備注。 9、 Resize 只有Firefox 4和Safari 3支持此屬性。Resize是CSS3 UI模型中的一部分，可用于重定義textarea的大小。 默認情況下webkit瀏覽器和Firefox 4支持水平和垂直方向上的重定義。 textarea { -moz-resize: vertical; -webkit-resize: vertical; resize: vertical; } 可能的值： both： 重定義水平和垂直方向 horizontal： 水平調整大小限制 vertical： 垂直調整大小限 none： 不支持重定義 10、 Transition 也許CSS3最令人興奮的增補，就是在沒有 javascript 的元素的情況下產生動畫。 好像IE9還不支持此功能，但這并不代表你不能使用這個功能，關鍵是在于提高技能。 現在模仿一個效果，當鼠標滑過右側鏈接時，文本向右滑動。 The HTML The CSS ul a { -webkit-transition: padding .4s; -moz-transition: padding .4s; -o-transition: padding .4s; transition: padding .4s; } a:hover { padding-left: 6px; } transition 有三個參數： The property to transition. （Set this value to all if needed） 轉換屬性。（設置此值為所有如有需要） The duration 持續時間 The easing type 緩動類型 為什么我們不將transition直接應用到hover上呢？是因為我們只是在mouseover時生效，當mouseout時元素將立即返回到其最初的狀態。 因為我們對效果做了調整，所有對舊的瀏覽器不會產生任何影響。 |
