以下內容由寶雞網(wǎng)站建設、寶雞網(wǎng)絡(luò )公司，寶雞世紀網(wǎng)絡(luò )為您編輯整理。

1、 border-radius

border-radius是一大堆CSS3屬性中最受歡迎的一種，border-radius是CSS3中級別最高的一個(gè)屬性。當設計者害怕一個(gè)層在將在不同的瀏覽器之間以不同的方式顯示時(shí)，CSS圓角，一個(gè)很初級的知識，將

引導他們開(kāi)始學(xué)習。

我們?yōu)橐苿?dòng)瀏覽器提供一個(gè)備用的觀(guān)看體驗的想法都非常好。奇怪的是，當這種方法出現在桌面瀏覽器上時(shí)，他們卻又不這么認為。

-webkit-border-radius: 4px;

-moz-border-radius: 4px;

border-radius: 4px;

注意：請在Safari 5 和 IE9瀏覽器中執行”border-radius”語(yǔ)法。

圓

許多讀者也許不會(huì )意識到我們可以用這個(gè)屬性來(lái)做一個(gè)圓。

-moz-border-radius: 50px;

-webkit-border-radius: 50px;

border-radius: 50px;

如果想再添加點(diǎn)效果，我們可以利用Flexible Box Model（詳情在8中）來(lái)使得文字在垂直在水平方向都居中。這需要加點(diǎn)代碼，但這僅僅是對不同瀏覽器的補償。

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

接下來(lái)是非常普遍的box-shadow，可以使你的元素立即美化，只是記得不要把值設得太離譜。

-webkit-box-shadow: 1px 1px 3px #292929;

-moz-box-shadow: 1px 1px 3px #292929;

box-shadow: 1px 1px 3px #292929;

box-shadow的四個(gè)參數

x-offset x軸偏移

y-offset y軸偏移

blur 模糊值

color of shadow 陰影顏色

現在，許多人不知道可以一次運用多個(gè)box-shadows，這樣做會(huì )產(chǎn)生一些有趣的效果。在下圖中，我使用藍色和綠色陰影來(lái)放大一下效果。

-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是我們可以省略前綴的幾個(gè)CSS屬性之一，類(lèi)似的還有box-shadow，它必須應用于文本，并它們有相同的四個(gè)參數：

x-offset 水平位移

y-offest 垂直位移

blur 模糊值

color of shadow 陰影顏色

h1 {

text-shadow: 0 1px 0 white;

color: #292929;

}

Text-Outline

和box-shadow一樣，它可以設置多個(gè)陰影通過(guò)逗號分隔符。例如，我們創(chuàng )建文本框的輪廓，當webkit不支持stroke效果，我們可以使用下面的代碼讓更多的瀏覽器支持（雖然不是很美觀(guān)）。

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

使用這個(gè)方法時(shí)要注意了，只有webkit（Safari， Chrome， iPhone）在最后的幾年內還支持這個(gè)屬性。其實(shí)，雖然我可能是錯的，’text-stroke’還不屬于CSS3范疇的一部分。在這種情況下，使用白

色字體時(shí)，firefox會(huì )顯示一個(gè)空白頁(yè)面。要解決此問(wèn)題，你即可以使用javascript，也可以通過(guò)使用一種不同于背景顏色的文字顏色。

h1 {

-webkit-text-stroke: 3px black;

color: white;

}

Feature Detection

我們如何為firefox提供一組可用的樣式，和為另外的一組Safari或Chrome？解決辦法就是多做測試。

通過(guò)feature detection，我們可以利用javascript來(lái)測試某屬性是否可用，如果不行，我可就要采用備用的。再回到text-stroke的問(wèn)題上，為不支持此屬性的瀏覽器設定一個(gè)備用黑色（目前的除

webkit外）。

var h1 = document.createElement(’h1’);

if ( !( ’webkitTextStroke’ in h1.style ) ) {

var heading = document.getElementsByTagName(’h1’)[0];

heading.style.color = ’black’;

}

首先我們設定一個(gè)h1元素，然后執行，通過(guò)樣式屬性以確定-webkit-text-stroke是否支持此元素。如果不支持，我們會(huì )把標題由白色設置成黑色。

5、 Multiple Backgrounds

Background屬性在CSS3樣式中已經(jīng)徹底改革，開(kāi)始支持多背景圖片。

舉個(gè)簡(jiǎn)單的例子，如果沒(méi)和合適的圖像，我們將使用兩個(gè)教程的圖像作為我們的背景，當然在程序中你可能會(huì )用紋理，也許是漸變作為圖像。

.box {

background: url(image/path.jpg) 0 0 no-repeat,

url(image2/path.jpg) 100% 0 no-repeat;

}

以上，通過(guò)逗號分隔符，插入了兩張背景圖像，第一個(gè)的定位是（0，0），第二個(gè)的定位是（100%，0）。要確定你對不支持的瀏覽器使用了備用圖片，否則，它將跳此屬性，使背景圖像留空。對舊瀏覽

器的補償要添加一張單獨的圖像給老瀏覽器用，像IE7。要定義兩遍background，一遍是為老瀏覽器，另一遍是重寫(xiě)?；蛘吣憧梢栽俅尾榭聪翸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

目前我們已經(jīng)可以使用這種比較靈活的方式去重定義背景圖像的大小。

background: url(path/to/image.jpg) no-repeat;

background-size: 100% 100%;

上面的代碼使得背景圖像已經(jīng)占據了整個(gè)可用空間。但是，如果我們使用一個(gè)特殊的圖片去占據body元素的整個(gè)空間而無(wú)論窗口有多寬，那又怎么做？

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

瀏覽器最初開(kāi)發(fā)文本溢出屬性可以設定兩個(gè)值：clip ellipsis此屬性支持切斷容器中的文本，而且也給出了一個(gè)省略號的特性。

.box {

-o-text-overflow: ellipsis;

text-overflow:ellipsis;

overflow:hidden;

white-space:nowrap;

border: 1px solid black;

width: 400px;

padding: 20px;

cursor: pointer;

}

或許你會(huì )考慮當鼠標經(jīng)過(guò)時(shí)顯示全部的文本內容。

#box:hover {

white-space: normal;

color: rgba(0,0,0,1);

background: #e3e3e3;

border: 1px solid #666;

}

有點(diǎn)奇怪，這看起來(lái)并不像是重置text-overflow屬性或是停用它，使之生效，在on:hover中我們可以使得white-space的normal屬性?，F在正常了。知道嗎？您還可以指定自己的字符串，應使用省略號

的位置。這樣做來(lái)修飾要顯示的文本字符串。

8、 Flexible Box Model

Flexible Box Model將最終使我們遠離類(lèi)似float的困擾。雖然是要給你的頭部換一個(gè)新的屬性，但一旦你這么做了，將終身受益。

做個(gè)演示，創(chuàng )建簡(jiǎn)單的兩列布局。

首先我們要設定一個(gè)容器，然后指定它的寬和高，即便是沒(méi)有實(shí)質(zhì)性的內容在里面。

#container {

width: 960px;

height: 500px; /* just for demo */

background: #e3e3e3;

margin: auto;

display: -moz-box;

display: -webkit-box;

display: box;

}

接下來(lái)分別定義#main和aside的背景色

#main {

background: yellow;

}

aside {

background: red;

}

到目前為了還沒(méi)有看出什么效果來(lái)。

值得一提的是，雖然我們設置了display:box模型，它的子元素會(huì )占據整個(gè)垂直空間。這就是它的默認box-align屬性stretch。

看看有什么效果產(chǎn)生，當我們設置了#main的寬度后。

#main {

background: yellow;

width: 800px;

}

但是我們仍有個(gè)疑問(wèn)，為什么aside不占據剩余的全部空間呢？我們可以用新屬性box-flex來(lái)試下。

box-flex 使得元素占據整個(gè)空間。

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;

}

使用這個(gè)屬性后，不管#main有多寬，aside都將占據整個(gè)可用的空間。同時(shí)你也不必擔心諸如float等產(chǎn)生的問(wèn)題，像使得元素被排擠到下一行。

我只是在這兒膚淺的說(shuō)一下，請參閱保羅愛(ài)爾蘭優(yōu)秀文章的詳細信息。然而，使用此方法的時(shí)候也應注意一下兼容問(wèn)題，例如老的瀏覽器應該先測試下，并且提供必要的備注。

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最令人興奮的增補，就是在沒(méi)有 javascript 的元素的情況下產(chǎn)生動(dòng)畫(huà)。

好像IE9還不支持此功能，但這并不代表你不能使用這個(gè)功能，關(guān)鍵是在于提高技能。

現在模仿一個(gè)效果，當鼠標滑過(guò)右側鏈接時(shí)，文本向右滑動(dòng)。

The HTML

• Hover Over Me
• Hover Over Me
• Hover Over Me
• Hover Over Me

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 有三個(gè)參數：

The property to transition. （Set this value to all if needed） 轉換屬性。（設置此值為所有如有需要）

The duration 持續時(shí)間

The easing type 緩動(dòng)類(lèi)型

為什么我們不將transition直接應用到hover上呢？是因為我們只是在mouseover時(shí)生效，當mouseout時(shí)元素將立即返回到其最初的狀態(tài)。

因為我們對效果做了調整，所有對舊的瀏覽器不會(huì )產(chǎn)生任何影響。

以上內容就是由寶雞網(wǎng)站建設、寶雞網(wǎng)絡(luò )公司，寶雞世紀網(wǎng)絡(luò )為您搜集整理的《世紀網(wǎng)絡(luò )總結10個(gè)經(jīng)典的CSS3屬性》的全部?jì)热荨?/SPAN>我公司是在寶雞市工商局注冊的專(zhuān)業(yè)提供網(wǎng)站建設、網(wǎng)站優(yōu)化、網(wǎng)站推廣，軟件開(kāi)發(fā)的高新技術(shù)企業(yè)，一直致力于面向寶雞地區黨政機關(guān)、企事業(yè)單位提供大中型門(mén)戶(hù)網(wǎng)站解決方案、 OA 辦公自動(dòng)化系統解決方案，以及中小型應用軟件開(kāi)發(fā)及其它信息化外包業(yè)務(wù)。目前已承建寶雞地區近760多家政府網(wǎng)站、企業(yè)網(wǎng)站，是寶雞網(wǎng)站建設行業(yè)規模最大、客戶(hù)數量最多、技術(shù)力量雄厚的寶雞網(wǎng)絡(luò )公司。歡迎您來(lái)電咨詢(xún)，咨詢(xún)熱線(xiàn)：0917-3535180 3536690……