本文主要跟大家聊聊關於CSS3的一些小知識，希望能幫助大家。下面跟著小編一起來看看吧。
box-shadow向p 元素添加陰影
box-shadow: h-shadow v-shadow blur spread color inset;
h-shadow：必要的。水平陰影的位置。允許負值
v-shadow：必需的。垂直陰影的位置。允許負值
blur：可選。模糊距離
spread：可選。陰影的大小
color 可選。陰影的顏色。在CSS顏色值尋找顏色值的完整清單
inset 可選。從外層的陰影（開始時）改變陰影內側陰影
2.transform：旋轉p 元素
相容性問題：
-ms-transform:rotate(7deg); / * IE 9 */
-moz-transform:rotate(7deg); /* Firefox */
-webkit-transform:rotate(7deg); /* Safari 和Chrome */
-o-transform:rotate(7deg); /* Opera */
3.transition：請將滑鼠指標移到藍色的p 元素上，就可以看到過渡效果。
<
請把滑鼠指標移到藍色的 p 元素上，就可以看到過渡效果。
!DOCTYPE html>
<html>
<head>
<style>
p
{
width:100px;
height:100px;
background:blue;
transition:width 2s;
-moz-transition:width 2s; /* Firefox 4 */
-webkit-transition:width 2s; /* Safari and Chrome */
-o-transition:width 2s; /* Opera */
}
p:hover
{
width:300px;
}
</style>
</head>
<body>
<p></p>註解：本例在 Internet Explorer 中無效。