CSS3中的5個(gè)有趣的新技術(shù)
互聯(lián)網(wǎng) 發(fā)布時(shí)間：2009-04-02 19:36:48 作者：佚名 
我要評(píng)論
我要評(píng)論網(wǎng)頁(yè)制作Webjx文章簡(jiǎn)介：網(wǎng)頁(yè)教學(xué)網(wǎng)將在這篇文章向大家展示CSS中的5個(gè)有趣的新技術(shù):圓角、個(gè)別圓角、不透明度、陰影和調(diào)整元素大小.
CSS是眾所周知且應(yīng)用廣泛的網(wǎng)站樣式語(yǔ)言，在它的版本三(CSS3)計(jì)劃中，新增了一些能夠節(jié)省時(shí)
腳本之家將在這篇文章向大家展示CSS中的5個(gè)有趣的新技術(shù):圓角、個(gè)別圓角、不透明度、陰影和調(diào)整元素大小. 3:個(gè)別的圓角
如果按照過(guò)去的習(xí)慣做法，會(huì)浪費(fèi)你很多時(shí)間，現(xiàn)在CSS3能快速解決!
我們現(xiàn)在只想讓div的右上和右下是圓角，那么僅需稍作修改:
#indie {
background-color: #000;
border: 1px solid #000;
-moz-border-radius-topright: 10px;
-moz-border-radius-bottomright: 10px;
-webkit-border-top-left-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
}
試想一下這種做法會(huì)用在網(wǎng)頁(yè)中的什么元素呢？對(duì)！就是標(biāo)簽式的導(dǎo)航按鈕！ 4:以CSS3的方式修改不透明度
現(xiàn)在你可以按慣例編寫幾行代碼來(lái)實(shí)現(xiàn)不透明度的效果(hack)。不過(guò)CSS3簡(jiǎn)化了這個(gè)流程。加此信息腳本之家（jb51.net）發(fā)布目的是為了防止你變懶！jb51.net不主張采集！
這行代碼很好記，僅僅是 “opacity: value;”:
5:陰影效果
#opacity {
background-color: #000;
opacity: 0.3;
}
實(shí)現(xiàn)陰影也有很多方法，最常用的就是使用Photoshop制作成陰影圖片，然后應(yīng)用到背景屬性中。但CSS3讓你的工作更有效率，不幸的是，目前只有Safari和Chrome支持這個(gè)新特性。
僅僅需要一行代碼，不過(guò)它有4個(gè)不同的值:
-webkit-box-shadow: 3px 5px 10px #ccc;
下面我來(lái)解釋一下這四個(gè)值都代表什么，第一個(gè)3px是指定陰影與div元素之間的水平(橫向)距離，第二個(gè)5px指的是陰影與div之間的垂直(縱向)距離，第三個(gè)10px指的是陰影的模糊度(類似于photoshop中的羽化)，值越大越細(xì)膩。最后的值不說(shuō)大家也知道，就是陰影的顏色。
我們最終陰影效果代碼；
#shadow {
background-color: #fff;
border: 1px solid #000;
-webkit-box-shadow: 3px 5px 10px #ccc;
}
正如你看到的，我們個(gè)這個(gè)div設(shè)置了白色的背景，黑色的邊框和亮灰色的陰影。
相關(guān)文章
使用CSS3的appearance屬性改變?cè)氐耐庥^的方法
大家都知道每個(gè)瀏覽器對(duì)HTML元素渲染都不一樣，比如說(shuō)button，在chrome和ff中，渲染出來(lái)的效果都是不盡相同的。這樣一來(lái)就有了今天這個(gè)思路，利用瀏覽器的對(duì)元素的默認(rèn)渲染2015-12-12
基于jquery+css3實(shí)現(xiàn)的元素顫抖特效源碼
jquery+css3實(shí)現(xiàn)元素顫抖特效是一款基于css3實(shí)現(xiàn)的抖動(dòng)效果，各種鬼畜般的抖動(dòng)2015-01-14CSS3 重置iphone瀏覽器按鈕input,select等表單元素的默認(rèn)樣式
之前寫了一個(gè)登錄表單頁(yè)面，再iphone上測(cè)試遇到了一些奇怪的問(wèn)題：表單中的input[type="submit"]按鈕在iPhone的safari瀏覽器下會(huì)出現(xiàn)圓角的情況；input[type="text"]文本輸2014-10-11- 無(wú)論是偽類還是偽元素，都屬于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即可，這兩個(gè)屬性當(dāng)前只有webkit和moz支持，要設(shè)置垂直居中的話只需要將這兩個(gè)屬性的值都設(shè)置為center即可，需要的朋友可以參考下2014-09-01- 讓我們通過(guò)完成一下的實(shí)例來(lái)了解一下如何在不使用無(wú)用的class和id屬性的情況下利用CSS3定位頁(yè)面元素。2009-08-29
- 網(wǎng)頁(yè)制作Webjx文章簡(jiǎn)介：CSS 3增加了大量的結(jié)構(gòu)偽類，利用文檔結(jié)構(gòu)樹來(lái)實(shí)現(xiàn)表現(xiàn)，從而可以減少頁(yè)面內(nèi)class屬性和ID屬性的定義，使得文檔更加簡(jiǎn)潔。 相關(guān)閱2009-04-02
css3實(shí)現(xiàn)多個(gè)元素依次顯示效果
在css3中，我們使用animation與keyframes結(jié)合，可以給元素添加各種各樣的動(dòng)畫效果。這篇文章主要介紹了css3實(shí)現(xiàn)多個(gè)元素依次顯示效果,需要的朋友可以參考下2017-12-12
