這裡推薦給大家4個CSS3的新屬性，非常的實用，附上範例，有需要的朋友可以好好研究下。做專案常常會用到
css3剛推出不久，雖然大多數的css3屬性在很多流行的瀏覽器中不支持，但我個人覺得還是要盡量開始慢慢的去了解並使用css3（還有html5），因為我覺得這是一種趨勢，它是一種已經被制定的標準。我並不是專門在做前端的，只是有時不得不自己去寫這些東西，有時喜歡研究研究這些，所有以上都只是我的個人看法。
1、在之前我想在頁面做出一個邊框為圓角框，似乎需要寫挺多css程式碼的（可能我沒了解到更好的辦法），在css3裡有一個屬性創建圓角是非常容易的，設定好角度也可以建立一個圓
border-radius：
##css程式碼：
#test
{
text-align:center;
padding:10px 40px;
background:gray;
width:350px;
border-radius:10px;
-moz-border-radius:10px; /* 为了让老的 Firefox版本支持 */
}<body> <p>border-radius 做圆角的例子。</p> </body>
2、CSS3 邊框陰影，之前我都是直接利用
圖片做背景實現的效果，用css3中的box-shadow屬性也可以做到
box-shadow：
#test1
{
box-shadow: 10px 10px 5px #A5A5A5;
width:300px;
height:100px;
}CSS3 多重背景圖片
.box
{
width:464px;
height:300px;
background:url(test1.jpg) 0 0 no-repeat,url(test2.jpg) 100% 0 no-repeat;
}
</style>
</head>
<body>
<p></p>
</body>登入後複製
4、text-overflow
屬性規定當文字溢出包含元素時發生的事情。
<em>.test3 {<br/>text-overflow:ellipsis;<br/>overflow:hidden;<br/>white-space<br/>:nowrap;<br/>border: 1px solid black;<br/>width: 400px;<br/>padding: 20px;<br/>cursor: pointer;<br/>}<br/>#test3<br/>:hover<br/> {<br/>white-space: normal;<br/>color: rgba(0,0,0,1);<br/>background: #e3e3e3;<br/>border: 1px solid #666;<br/>}<br/></style><br/></head><br/><body><br/><p>当这里显示的内容溢出是会有省略号，鼠标移到文本上面会显示所有内容</p><br/></body><br/></em>登入後複製
5、過渡效果
，透過CSS3，我們可以在不使用Flash 動畫或JavaScript 的情況下，當元素從一種樣式變換為另一種樣式時為元素新增效果。
效果用貼圖比較難體現出來，有興趣自己運行下面程式碼：
程式碼如下:
<style>
p
{
width:100px;
height:100px;
background:blue;
transition:width 2s, height 2s;
-moz-transition:width 2s, height 2s, -moz-trans
for
m 2s; /* 可以支持Firefox 4 */
-webkit-transition:width 2s, height 2s, -webkit-transform 2s; /* 可以支持Safari and
Chr
ome */
-o-transition:width 2s, height 2s, -o-transform 2s; /* 可以支持Opera */
}
p:hover
{
width:200px;
height:200px;
transform:rotate(180deg);
-moz-transform:rotate(180deg); /* 可以支持Firefox 4 */
-webkit-transform:rotate(180deg); /* 可以支持Safari and Chrome */
-o-transform:rotate(180deg); /* 可以支持Opera */
}
</style>
</head>
<body>
<p>把鼠标放上该区域，来查看过渡效果。</p>
</body>【相關推薦】
1.
CSS3免費視訊教學用CSS製作聊天框小尖角、氣泡效果瀏覽器實現行動裝置高效能css3動畫h5+css3實作圖片飛入與淡入淡出效果的程式碼實例教你使用CSS3製作8種Loading動畫以上是分享幾個常用的最新的css3屬性的詳細內容。更多資訊請關注PHP中文網其他相關文章！
