.demo
/* 背景顏色 漸變； 邊框圓角 ；相對定位；多餘邊框隱藏；滑鼠指標變成小手*/
.box
/* 設定乙個偽類before 前置的；content 內容設定為空；背景設定為透明背景顏色；寬高各為父級的百分百；整體透明度為0；定位為絕對定位；
top 為 0； left 為 0； 層次結構 index為0； transition 為 0.5s；
*/.box:before
/* 設定 觸碰box 後box的偽類before 為 透明度 1 */
.box:hover:before
/* box 的 寬為百分百 高取決於自動；transition時間定義為0.5s ；
clip-path 這個樣式 作為重點！！！！！！！！
clip-path 可以稱之為剪下切片；
polygon為它的屬性 （） 括號裡分為4個面 中間用逗號隔開
分 上 右 下 左 每個方位 都有倆個 定位向 【分為水平和垂直】；
-webkit- 相容瀏覽器 核心架構；
要寫乙個 架構樣式 必須 注重各大瀏覽器的相容；
*/.box img
/* 觸碰盒子 透明度為 0.5； 它的剪下切片 變為 菱形的*/
.box:hover img
/* 盒子的 文字內容：字型顏色為白色；文字居中；寬為父級的100%;透明度為0；
transform： translatex 以x軸 讓他在 x軸的 中間 translatey 以y軸 讓他在 y軸的 中間
rotate 旋轉 單位為deg 先給他定義 乙個 旋轉 為-55deg;
設定 絕對定位； top為50%； left為50%； 文字的層次結構 z-index 為1；
transition 時間軸 為 0.5s；
*/.box-content
/* 觸碰盒子他的文字區域 透明度為1，transform 繼續讓它 x 和 y軸為中心
但是 它的旋轉 為 0； 讓它 從 -55deg 變為 0deg；
*/.box:hover .box-content
/* 文字區 就不 詳細介紹了 */
.title
.post
"demo">
"container">
"row">
"col-md-4 col-sm-6">
"box">
"box-content">"post">web designer
純 CSS 實現縷空遮罩層
有很多網頁在做引導時，遮罩層做成了縷空效果，最近我也遇到乙個這樣的需求，如圖 最容易想到的方法是切圖，這個不用解釋了。在網上找到的大部分做法都是用邊框，那麼我們來看一下邊框怎麼實現這個效果。mask mask 複製 實現效果如下 仔細一看，咦，我的圓角呢？原來是因為border width設定越大，...
css彈出遮罩層
說明 需要jquery支援，支援ie8 googlechrome，firefox，話不多說，上 html type button onclick showmaskshadow value 彈出遮罩層 class bgdiv div class contentdiv type button oncli...
純CSS繪製星星評分特效
只需要用兩個圖示即可實現 實現效果如下 以下為 星級評分展示css樣式技巧 title styletype text css vote star vote star i vote number style head body divclass star spanclass vote star ist...