我是厭世的Yen

偽類選擇器&偽元素選擇器 ( <a,  . 按鈕: hover/ active, before, after) 預設值是inline 如果要變更尺寸 需加入 display:inline-block  ☝偽類選擇器 用于定义元素的特殊状态。 例如 滑鼠移入顏色改變的效果 .btn :hover { color: red;}  滑鼠點擊顏色改變的效果 .btn :active { color: #ff9b29;} ✌偽元素選擇器 只有在css寫入 在html沒有 也可在網頁生成元素 eg: .btn:before{                    content:"可在這輸入文字"; 如果要使用偽元素作線條 content裡面的”“可以不用寫內容 但是要寫 content:""; 例如 btn 設定顏色 尺寸 字形 大小 周遭範圍大小（padding) .btn:before{                   content:"";                   width :100%; (與父層定位同寬）                   height: 3px;                  backfround-color: #ff9b19;                   display: inline-block;                  position: absolute; ( 以父層做定位）                 top/ bottom: 0;                 left: 0;  /50% (對齊 定位 父層從中間向左延伸％50)                 transition: width 0.3s; （ 寫的位置在線條設定中    transition 屬性 時間 顯示的過渡變化 ） 👉 結合hover 移入按鈕前後 線條顯示效果 .btn:before/after{  （ 移入按鈕前 線條設定）                   content:"";                   width :0%;  (不顯示）                   height:

  transition transition-property: width, height;  什麼樣的轉場變化效果 例如 寬＆高的變化 transition-duration:  0.5s(寬度變化的時間）, 1s（高度變化的時間）; 時間多長 transition-delay: o.5s(寬度時間delay),1s(高度時間delay);  transition-timing-function: ease(預設值）/linear;  cubic-bezier 貝茲曲線 cubic-bezier  參考網址 https://cubic-bezier.com/#.17,.67,.83,.67 縮寫方式： transition: width 0.5s 1s（delay） ,  (使用逗號隔開兩個值）  height 0.5s 空格隔開 ease-in; transition：all(包含寬高同時delay) 0.5s ease-in; 常見問題 transition 位置寫在 .box 裡面 效果就會都呈現在移出＆移入  .box{ 設定所需方匡的大小顏色           width: 100px;           height: 100px;           background-color:#ff0043;           } .box:hover{ 滑鼠移入效果                     width: 200px;                     height: 200px; transition 置中定位 .box{            width: 100px;           height: 100px;           background-color:#ff0043;           position: fixed; (以 螢幕為參考定位 ）          left: 50%;          top: 50%;          (因為是以 螢幕為參考定位 所以 不會真的在正中間            會超出一個物 件的範圍 故必須要物件 變形（往回/減少）           transform: translate(-50%, - 50%)  水平跟垂直的移動。          

24 chapter 使用偽元素 加入滑鼠移入 點擊效果 padding : 10px（上下） 30px;（左右） 寫padding直接代替寬高的好處是 會依造字體在筐內的大小以比例調整 ＊在a 連結的屬性是inline 故如果要寫入padding 必須再加入 display: inline-block; 圓角border-radius設定 如果寬高都是1:1 > 50%  >正圓 如果半徑是寬高的一半> 圓角 如果有設定（行高line-height 要加上物件上下的高) /2 >圓角 使用偽元素 來遮蓋另外一個物件或內容 要考慮層級關係 .btn:before{  選擇before 白色圓圈才不會蓋到span字體 因為before會在html 的span之前  在可定位元素的狀況下 有層級關係   html 在後面的元素會去蓋掉前面的元素 故在html 上的span不被後面的元素蓋掉         content:""; 如果有寫 position: absolute; 就可以不用寫 display: inline-block 在按鈕上面加滑鼠移入白色圓形效果時 設定白色大小需注意 width: 100% ; 如果高也是寫height: 100%; 這樣會是長方形 不是正方形 因為是依造外面的 a 尺寸 就不會是一比一 故要寫padding-top: 100%; 因為內距的寬度百分比是依據width的寬！ 透明的白設定為 rgba(256,256,256,0.2) .btn:hover:before{ 從零到有＋轉場效果＋影藏超出範圍效果（要加在主物件內） 在.btn:before{ width & padding-top 顯示為0%                          transition: all 0.2s; 在.btn:hover:before{width & padding-top 顯示為100% 滑鼠點下時會有下沉感 .btn:active{                   box-sahdow: 0 3px 5px rgba(0,0,0,0.5)                   }