:target 是css3 中新增的乙個偽類，用以匹配當前頁面的uri中某個標誌符的目標元素（比如說當前頁面url下新增#comment就會定位到id=「comment」的位置，俗稱錨）。css3 為這個動作賦予了更加多的功能——就如同:hover 一樣你可以做一些樣式定義。
先上效果圖
正如標題所說，本文是教你如何巧用css3:target偽類製作dropdown下拉列表，原生html+css，無j**ascript。為了吸引各位往下看，先上實際例子，再進行剖析。
duang~ 實際例子其實就是devemobile 主題的右上角那個按鈕，你點一下就會有乙個dropdown下拉列表出現，在其他區域點選返回原狀。請用手機掃碼檢視：
或者直接看這個gif ：
例項剖析
從解釋原理的角度我們將html 拉出來最小化**如下：
css code複製內容到剪貼簿
大體上上面的html**可以分為兩部分，一部分是乙個出發下拉動作的入口（我習慣稱為「開關」）——通常是乙個button（例項是將a標籤替換為乙個button的功能）；一部分就是觸發動作的下拉列表顯示了。
可能你會問close 這個類修飾的a標籤那段是做什麼的？當你觸發下拉列表後，有時候需要做關閉（返回原狀）的動作，而從具體情況（比如說如本例項觸發選單後選單將原來的開關都掩蓋程式設計客棧了）或者使用者體驗上考慮，最好是除選單區域外的整個螢幕都隨便盲點就能關閉選單。這個a標籤就是實現在開啟開關後產生乙個透明的遮罩層覆蓋到螢幕上。
有了上面的思路，那麼再具體化為下面的**（忽略個別無關緊要的樣式，sass**）：
css code複製內容到剪貼簿
程式設計客棧
稍微解釋下上面的sass**：預設的情況下是隱藏下拉列表（採用透明屬性opacity 與css3的transform的scale 縮小至0，遮罩層則預設隱藏）；當開關觸發後透明度變為1且放到至正常的一倍，同時遮罩層顯示。為了讓下拉列表更顯「下拉」的情況，採用css3的origin定位下轉換原點。
注意下相容性，所有主流瀏覽器均支援 :target，除了 ie8 及更早的版本，移動端的話直接用。稍微理解下你就可以運用到自己的專案中了，h**e fun！
本文標題: css3製作dropdown下拉列表的方法
本文位址:
css3 製作漸變
先了解一下目前的幾種現代瀏覽器的核心，主流內容主要有 mozilla gecko 熟悉的有firefox，flock等瀏覽器 moz webkit 熟悉的有safari chrome等瀏覽器 webkit opera presto opera瀏覽器 o trident ie瀏覽器 線性漸變 line...
css3製作圓角按鈕
使用 css3 製作圓角按鈕，無需 首先來看看效果圖 html 就這麼簡單 button button button 如果沒有 css 那麼上面的 html 執行起來是這樣的 開始 css3 的編寫 button一些不同顏色的按鈕樣式 green blue color blue gray color...
CSS3之圓角製作
如今css3中的border radius出現後，讓我們沒有那麼多的煩惱了，首先製作圓角的時間是省了，而且其還有多個優點 其一減少 的維護的工作量，少了對的更新製作，的替換等等 其 二 提高 的效能，少了對進行http的請求，網頁的載入速度將變快 其三增加視覺美觀性。既然border radius有...