分享幾個常用的最新的css3屬性-css教學-PHP中文網

首頁

web前端

css教學

分享幾個常用的最新的css3屬性

Y2J

May 23, 2017 am 10:52 AM

css3

這裡推薦給大家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版本支持 */
}

登入後複製

html程式碼：

#程式碼如下:

<body>
<p>border-radius 做圆角的例子。</p>
</body>

登入後複製

2、CSS3 邊框陰影，之前我都是直接利用
圖片做背景實現的效果，用css3中的box-shadow屬性也可以做到

box-shadow：

css程式碼：

程式碼如下：

#test1
{
box-shadow: 10px 10px 5px #A5A5A5;
width:300px;
height:100px;
}

登入後複製

html程式碼：

程式碼如下:

##3、css3 支援背景圖片可以用多張圖片

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>

登入後複製

【相關推薦】

CSS3免費視訊教學

用CSS製作聊天框小尖角、氣泡效果

3 .

瀏覽器實現行動裝置高效能css3動畫

h5+css3實作圖片飛入與淡入淡出效果的程式碼實例

# 5.

教你使用CSS3製作8種Loading動畫

以上是分享幾個常用的最新的css3屬性的詳細內容。更多資訊請關注PHP中文網其他相關文章！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn