分享幾個常用的最新的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

我們如何標記Google字體並創建Goofonts.comApr 12, 2025 pm 12:02 PM

Goofonts是由開發人員和設計師丈夫簽名的附帶項目，它們都是版式的忠實擁護者。我們一直在標記Google

永恆的Web開發文章Apr 12, 2025 am 11:44 AM

Pavithra Kodmad向人們詢問了他們認為是關於網絡開發的一些最永恆的文章的建議

與部分元素的交易Apr 12, 2025 am 11:39 AM

同一天發表了兩篇文章：

使用JavaScript API練習GraphQl查詢Apr 12, 2025 am 11:33 AM

學習如何構建GraphQL API可能具有挑戰性。但是您可以學習如何在10分鐘內使用GraphQL API！碰巧的是，我得到了完美的

組件級CMSApr 12, 2025 am 11:09 AM

當一個組件生活在數據查詢居住在附近的數據查詢的環境中時，視覺組件和

將類型設置在圓上...帶偏移路徑Apr 12, 2025 am 11:00 AM

這裡是Yuanchuan的一些合法CSS騙局。有此CSS屬性偏移路徑。曾幾何時，它被稱為Motion-Path，然後被更名。我

'恢復”在CSS中有什麼作用？Apr 12, 2025 am 10:59 AM

Miriam Suzanne在Mozilla開發人員的視頻中解釋了該主題。

現代戀人Apr 12, 2025 am 10:58 AM

我喜歡這樣的東西。

See all articles

熱AI工具

Undresser.AI Undress

人工智慧驅動的應用程序，用於創建逼真的裸體照片

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

免費脫衣圖片

Clothoff.io

AI脫衣器

AI Hentai Generator

免費產生 AI 無盡。

熱工具

MinGW - Minimalist GNU for Windows

這個專案正在遷移到osdn.net/projects/mingw的過程中，你可以繼續在那裡關注我們。 MinGW：GNU編譯器集合（GCC）的本機Windows移植版本，可自由分發的導入函式庫和用於建置本機Windows應用程式的頭檔；包括對MSVC執行時間的擴展，以支援C99功能。 MinGW的所有軟體都可以在64位元Windows平台上運作。

WebStorm Mac版

好用的JavaScript開發工具

SecLists

SecLists是最終安全測試人員的伙伴。它是一個包含各種類型清單的集合，這些清單在安全評估過程中經常使用，而且都在一個地方。 SecLists透過方便地提供安全測試人員可能需要的所有列表，幫助提高安全測試的效率和生產力。清單類型包括使用者名稱、密碼、URL、模糊測試有效載荷、敏感資料模式、Web shell等等。測試人員只需將此儲存庫拉到新的測試機上，他就可以存取所需的每種類型的清單。