標籤：content 水平 視窗 span 預設 應用 不一致 position lin
1、陰影box-shadow
文法：box-shadow: h-shadow v-shadow blur spread color inset;
h-shadow必需。水平陰影的位置。允許負值。
v-shadow必需。垂直陰影的位置。允許負值。
blur可選。模糊距離。但其值只能是為正值，如果其值為0時，表示陰影不具有模糊效果，其值越大陰影的邊緣就越模糊；
spread可選。陰影的尺寸。
color可選。陰影的顏色。請參閱 CSS 顏色值。如不設定顏色，瀏覽器會取預設色，但各瀏覽器預設取色不一致，建議不要省略此參數。
inset可選。將外部陰影 (outset) 改為內部陰影。
<style type="text/css"> div{ width:100px; height:100px; border:1px solid red; /* box-shadow 設定邊框陰影 取值：接受6個參數 box-shadow:陰影類型 水平位移 垂直位移 模糊程度 陰影大小 陰影顏色 陰影類型取值：預設是外陰影，inset表示內陰影 */ box-shadow:1px 1px 1px 1px gray; }
2、絕對位置
這個屬性定義建立元素布局所用的定位機制。任何元素都可以定位，不過絕對或固定元素會產生一個塊級框，而不論該元素本身是什麼類型。相對定位元素會相對於它在正常流中的預設位置位移。
| absolute | 產生絕對位置的元素，相對於 static 定位以外的第一個父元素進行定位。 元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規定。 |
| fixed | 產生絕對位置的元素，相對於瀏覽器視窗進行定位。 元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規定。 |
| relative | 產生相對定位的元素，相對於其正常位置進行定位。 因此，"left:20" 會向元素的 LEFT 位置添加 20 像素。 |
| static | 預設值。沒有定位，元素出現在正常的流中（忽略 top, bottom, left, right 或者 z-index 聲明）。 |
| inherit | 規定應該從父元素繼承 position 屬性的值。 |
CSS :hover 偽類
:hover 偽類在滑鼠移到元素上時向此元素添加特殊的樣式。
這個偽類應用處於“懸停狀態”的元素。懸停定義為使用者指示了一個元素但沒有將其啟用。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn"><head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <title>網頁標題</title> <meta name="keywords" content="關鍵字列表" /> <meta name="description" content="網頁描述" /> <link rel="stylesheet" type="text/css" href="" /> <style type="text/css"> div{ width:100px; height:100px; border:1px solid red; position:relative; left:0px; top:0px; transition:all 2s; } div:hover{ left:30px; } </style> <script type="text/javascript"> </script></head><body> <div></div></body></html>
【2016.11.22】css實現幾個效果
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
