介紹CSS3中的幾個新技術-css教學-PHP中文網

首頁

web前端

css教學

介紹CSS3中的幾個新技術

Y2J

May 11, 2018 pm 05:10 PM

css3div程式碼元素我們新技術陰影

網頁製作Webjx文章簡介：網頁教學網將在這篇文章向大家展示CSS中的5個有趣的新技術:圓角、個別圓角、不透明度、陰影和調整元素大小. CSS是眾所周知且應用廣泛的網站樣式語言，在它的版本三(CSS3)計劃中，新增了一些能夠節省時
腳本之家將在這篇文章向大家展示CSS中的5個有趣的新技術:圓角、個別圓角、不透明度、陰影和調整元素大小.
CSS是眾所周知且應用廣泛的網站樣式語言，在它的版本三(CSS3)計畫中，新增了一些能夠節省時間的功能。儘管只有當前最新了瀏覽器版本才能支援這些效果，但了解它們還是必須且有趣的。腳本之家將在這篇文章向大家展示CSS中的5個有趣的新技術:圓角、個別圓角、不透明度、陰影和調整元素大小。
相關文章：介紹CSS3使用技巧5個 1：基本標記
介紹CSS3中的幾個新技術
在我們開始這個教學之前，先來建立整個教學都要使用的基本標記。
我們的xHTML需要一下p元素: #round, 使用CSS3程式碼實現圓角. #indie, 應用個別的幾個圓角. #opacity, 展示新的CSS3實現不透明度的方式. #shadow,展示不使用Photoshop的情況下，使用CSS3來實現陰影效果. #resize, 示範如何使用某種CSS來實現重設大小的效果.
綜上所述，我們的xHTML應該是這樣的:

<!DOCTYPE html PUBLIC “-//
W3C
//
DTD
 XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html 
xml
ns=”http://www.w3.org/1999/xhtml”>
<
head
>
<meta http-equiv=”Content-Type” content=”text/html; char
set
=utf-8″ />
<title>An Introduction to CSS3; A Nettuts Tutorial</title>
<link href=”style.css” rel=”stylesheet” type=”text/css” />
</head>
<body>
<p id=”wrapper”>
<p id=”round”> </p>
<p id=”indie”> </p>
<p id=”opacity”> </p>
<p id=”shadow”> </p>
<p id=”resize”>
<img class="alignnone size-full wp-image-2157 lazy"  src="/static/imghwm/default1.png"  data-src="https://img.php.cn/upload/article/000/001/505/8634c49225d2d852dacdbbadecbfda3a-1.png?x-oss-process=image/resize,p_40"  src=”image.jpg” alt=”resizable image” width=”200″ height=”200″>
</p>
</p>
</body>
</html>

下面來建立基本CSS檔案:

body {
background-color: #fff;
}
#wrapper {
width: 100%;
height: 100%;
}
p {
width: 300px;
height: 300px;
margin: 10px;
float: left;
}

正如你上面看到的，我們給每個p元素300px的寬和高，並讓它們向左浮動，整個頁面的p都留給我們在後面的工作中添加樣式。看到本信息，說明該文章來自腳本之家www.jb51.net，如果文章不完整請到腳本之家jb51.net瀏覽！ 2:圓角
介紹CSS3中的幾個新技術
目前而言，創建圓角的方法有很多，但都很麻煩。最常用的方法:首先，你要創建圓角的圖片；然後，你要創建很多html元素並使用背景圖像的方式顯示圓角。具體流程你我都很清楚。
這個問題將在CSS3中很簡單的解決掉，那就是叫做「border-radius」的屬性。我們先創建一個黑色的p元素並給他設定黑色的邊框。邊框就是要實現「border-radius」屬性效果的前提。
像這樣:

#round {
background-color: #000;
border: 1px solid #000;
}

現在你已經創建了p元素，它看起來和你預期的樣子一樣，300px款和高有楞有角且是黑色的。下面我們來加入實作圓角的程式碼，它是如此的簡潔，只需要兩行程式碼。

#round {
background-color: #000;
border: 1px solid #000;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}

在這裡，我們加入了兩行類似的程式碼，-moz-適用於Firefox瀏覽器，而-webkit-則是用於Safari/Chrome瀏覽器。
附註:目前為止IE瀏覽器不支援border-radius屬性，所以如果想讓IE也有圓角效果，那麼就要單獨加入圓角了。
border-radius這個屬性直譯過來是邊框半徑的意思，就如同Photoshop一樣，它的值越大，圓角也就越大。

【相關推薦】

以上是介紹CSS3中的幾個新技術的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

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