CSS3中的5個有趣的新技術(shù)
互聯(lián)網(wǎng) 發(fā)布時間：2009-04-02 19:36:48 作者：佚名 
我要評論
我要評論網(wǎng)頁制作Webjx文章簡介：網(wǎng)頁教學(xué)網(wǎng)將在這篇文章向大家展示CSS中的5個有趣的新技術(shù):圓角、個別圓角、不透明度、陰影和調(diào)整元素大小.
CSS是眾所周知且應(yīng)用廣泛的網(wǎng)站樣式語言，在它的版本三(CSS3)計(jì)劃中，新增了一些能夠節(jié)省時
腳本之家將在這篇文章向大家展示CSS中的5個有趣的新技術(shù):圓角、個別圓角、不透明度、陰影和調(diào)整元素大小.
CSS是眾所周知且應(yīng)用廣泛的網(wǎng)站樣式語言，在它的版本三(CSS3)計(jì)劃中，新增了一些能夠節(jié)省時間的特性。盡管只有當(dāng)前最新了瀏覽器版本才能支持這些效果，但了解它們還是必須且很有趣味性的。腳本之家將在這篇文章向大家展示CSS中的5個有趣的新技術(shù):圓角、個別圓角、不透明度、陰影和調(diào)整元素大小。
相關(guān)文章：介紹CSS3使用技巧5個 1：基本標(biāo)記
在我們開始這個教程之前，先來創(chuàng)建整個教程都要使用的基本標(biāo)記。
我們的xHTML需要一下div元素: #round, 使用CSS3代碼實(shí)現(xiàn)圓角. #indie, 應(yīng)用個別的幾個圓角. #opacity, 展示新的CSS3實(shí)現(xiàn)不透明度的方式. #shadow,展示不使用Photoshop的情況下，使用CSS3來實(shí)現(xiàn)陰影效果. #resize, 展示如何使用某種CSS來實(shí)現(xiàn)重設(shè)大小的效果.
綜上所述，我們的xHTML應(yīng)該是這樣的:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>An Introduction to CSS3; A Nettuts Tutorial</title>
<link href=”style.css” rel=”stylesheet” type=”text/css” />
</head>
<body>
<div id=”wrapper”>
<div id=”round”> </div>
<div id=”indie”> </div>
<div id=”opacity”> </div>
<div id=”shadow”> </div>
<div id=”resize”>
<img src=”image.jpg” alt=”resizable image” width=”200″ height=”200″>
</div>
</div>
</body>
</html>
下面來創(chuàng)建基本CSS文件:
body {
background-color: #fff;
}
#wrapper {
width: 100%;
height: 100%;
}
div {
width: 300px;
height: 300px;
margin: 10px;
float: left;
}
正如你上面看到的，我們給每個div元素300px的寬和高，并讓它們向左浮動，整個頁面的div都留給我們在后面的工作中添加樣式?？吹奖拘畔?，說明該文章來源于腳本之家chabaoo.cn，如果文章不完整請到腳本之家jb51.net瀏覽！ 2:圓角
目前而言，創(chuàng)建圓角的方法有很多，但都很麻煩。最常用的方法:首先，你要創(chuàng)建圓角的圖片；然后，你要創(chuàng)建很多html元素并使用背景圖像的方式顯示圓角。具體流程你我都很清楚。
這個問題將在CSS3中很簡單的解決掉，那就是叫做“border-radius”的屬性。我們先創(chuàng)建一個黑色的div元素并給他設(shè)置黑色的邊框。邊框就是要實(shí)現(xiàn)“border-radius”屬性效果的前提。
像這樣:
#round {
background-color: #000;
border: 1px solid #000;
}
現(xiàn)在你已經(jīng)創(chuàng)建了div元素，它看起來和你預(yù)期的樣子一樣，300px款和高有楞有角且是黑色的。下面我們來添加實(shí)現(xiàn)圓角的代碼，它是如此的簡潔，僅僅需要兩行代碼。
#round {
background-color: #000;
border: 1px solid #000;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
在這里，我們添加了兩行類似的代碼，-moz-適用于Firefox瀏覽器，而-webkit-則是用于Safari/Chrome瀏覽器。
注:目前為止IE瀏覽器不支持border-radius屬性，所以如果想讓IE也有圓角效果，那么就要單獨(dú)添加圓角了。
border-radius這個屬性直譯過來是邊框半徑的意思，就如同Photoshop一樣，它的值越大，圓角也就越大。
相關(guān)文章
- 大家都知道每個瀏覽器對HTML元素渲染都不一樣，比如說button，在chrome和ff中，渲染出來的效果都是不盡相同的。這樣一來就有了今天這個思路，利用瀏覽器的對元素的默認(rèn)渲染2015-12-12
基于jquery+css3實(shí)現(xiàn)的元素顫抖特效源碼
jquery+css3實(shí)現(xiàn)元素顫抖特效是一款基于css3實(shí)現(xiàn)的抖動效果，各種鬼畜般的抖動2015-01-14CSS3 重置iphone瀏覽器按鈕input,select等表單元素的默認(rèn)樣式
之前寫了一個登錄表單頁面，再iphone上測試遇到了一些奇怪的問題：表單中的input[type="submit"]按鈕在iPhone的safari瀏覽器下會出現(xiàn)圓角的情況；input[type="text"]文本輸2014-10-11- 無論是偽類還是偽元素，都屬于CSS選擇器的范疇。所以它們的定義可以在CSS標(biāo)準(zhǔn)的選擇器章節(jié)找到。分別是 CSS2.1 Selectors 和 CSS Selector Level 3，兩者都已經(jīng)是推薦標(biāo)準(zhǔn)2014-09-04
css3設(shè)置box-pack和box-align讓div里面的元素垂直居中
只要設(shè)置元素的box-pack和box-align即可，這兩個屬性當(dāng)前只有webkit和moz支持，要設(shè)置垂直居中的話只需要將這兩個屬性的值都設(shè)置為center即可，需要的朋友可以參考下2014-09-01- 讓我們通過完成一下的實(shí)例來了解一下如何在不使用無用的class和id屬性的情況下利用CSS3定位頁面元素。2009-08-29
- 網(wǎng)頁制作Webjx文章簡介：CSS 3增加了大量的結(jié)構(gòu)偽類，利用文檔結(jié)構(gòu)樹來實(shí)現(xiàn)表現(xiàn)，從而可以減少頁面內(nèi)class屬性和ID屬性的定義，使得文檔更加簡潔。 相關(guān)閱2009-04-02
- 在css3中，我們使用animation與keyframes結(jié)合，可以給元素添加各種各樣的動畫效果。這篇文章主要介紹了css3實(shí)現(xiàn)多個元素依次顯示效果,需要的朋友可以參考下2017-12-12
