首頁 > 文章 > web前端 > 關於CSS3的一些小知識

關於CSS3的一些小知識

零到壹度原創: 2018-03-21 11:42:051076瀏覽

本文主要跟大家聊聊關於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 元素上，就可以看到過渡效果。
ad846d1ec8764448f5d4e08a5ccc7b3f請把滑鼠指標移到藍色的 p 元素上，就可以看到過渡效果。 94b3e26ee717c64999d7867364b1b4a3
```
!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>
```
e388a4556c0f65e1904146cc1a846beea4b561c25d9afb9ac8dc4d70affff419註解：0d36329ec37a2cc24d42c7229b69747a本例在 Internet Explorer 中無效。 94b3e26ee717c64999d7867364b1b4a3

36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e

#

以上是關於CSS3的一些小知識的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：

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

上一篇：CSS製作「正在載入」提示框下一篇：CSS製作「正在載入」提示框

相關文章

看更多