前往
大廳
主題

Google Chrome-CSS 樣式

—— | 2013-10-02 01:06:33 | 巴幣 2 | 人氣 1995

文字替換為自己喜愛的字體,文字加粗,並有陰影效果~
網頁上鍊接去除本身下劃線,更美觀。
鼠標指向鏈接,鏈接變大,並有淡藍色效果。
Mac版輸入框藍色,邊框變為圓角。
訪問過的鏈接網址變為紅色。
滾動條上下兩端為圓角,鼠標放在上面會有藍色熒光效果。
鼠標移動到圖片上,周圍會有綠色光暈效果。

套件:
有安裝 Stylish 的人在右上角的S圖示上按左鍵>管理已安裝樣式>編寫新的樣式,
名稱隨你取,代碼貼在樣式節裡後按保存即可。

把紅字改成自己喜歡的字型。

  1. /*三行分別是字體粗細(整百數字),字體樣式,字體陰影*/
  2. *{font-weight:500!important;}
  3. *{font-family: "Microsoft Yahei", "Microsoft Yahei" !important; }
  4. *{text-shadow:0.01em 0.01em 0.1em #999999 !important;}

  5. /*滾動條*/
  6. ::-webkit-scrollbar{width: 6px;height: 6px;}
  7. ::-webkit-scrollbar-track-piece{background-color: #CCCCCC;-webkit-border-radius: 6px;}
  8. ::-webkit-scrollbar-thumb:vertical{height: 5px;background-color: #999999;-webkit-border-radius: 6px;}
  9. ::-webkit-scrollbar-thumb:horizo​​ntal{width: 5px;background-color: #CCCCCC;-webkit-border-radius: 6px;}
  10. ::-webkit-scrollbar {width: 9px;height: 9px;}
  11. ::-webkit-scrollbar-track-piece {background-color: transparent;}
  12. ::-webkit-scrollbar-track-piece:no-button {}
  13. ::-webkit-scrollbar-thumb {background-color: #3994EF;border-radius: 3px;}
  14. ::-webkit-scrollbar-thumb:hover {background-color: #A4EEF0;}
  15. ::-webkit-scrollbar-thumb:active {background-color: #666;}
  16. ::-webkit-scrollbar-button:vertical { width: 9px; }
  17. ::-webkit-scrollbar-button:horizo​​ntal { width: 9px; }
  18. ::-webkit-scrollbar-button:vertical:start:decrement { background-color: white; }
  19. ::-webkit-scrollbar-button:vertical:end:increment { background-color: white; }
  20. ::-webkit-scrollbar-button:horizo​​ntal:start:decrement { background-color: white; }
  21. ::-webkit-scrollbar-button:horizo​​ntal:end:increment { background-color: white; }
  22. body::-webkit-scrollbar-track-piece {background-color: white;}

  23. /*指向圖片綠光*/
  24. img:hover{box-shadow: 0px 0px 4px 4px rgba(130,190,10,0.6) !important;-webkit-transition-property: box-shadow;-webkit-transition-duration: .31s;}
  25. img{-webkit-transition-property: box-shadow;-webkit-transition-duration: .31s;}

  26. /*輸入框美化*/
  27. input { border:#ccc 1px solid; border-radius: 6px; -webkit-border-radius: 6px;-webkit-border-radius: 6px;}
  28. input[type="text"]:focus, input[type="password"]:focus, textarea:focus {border: 2px solid #6FA1D9 !important;-webkit-box-shadow:0px 0px 5px #6FA1D9 !important; outline:none}
  29. input[type="checkbox"]:focus,input[type="submit"]:focus,input[type="reset"]:focus, input[type="radio"]:focus {border: 1px solid #6FA1D9 !important; outline:none}
  30. input:focus, select:focus, textarea:focus {outline: 1px solid #10bae0 ;-webkit-outline-radius: 3px ;}
  31. body a:hover:active {color: #10bae0;}
  32. body *:focus {outline: 2px solid rgba(16,186,224,0.5) ;outline-offset: 1px ;outline-radius: 2px ;-webkit-outline-radius: 2px ;}
  33. body a:focus {outline-offset: 0px ;}
  34. body button:focus,
  35. body input[type=reset]:focus, body input[type=button]:focus, body input[type=submit]:focus {outline-radius: 2px !important;-webkit-outline-radius: 2px !important;}
  36. body textarea:focus, body button:focus, body select:focus, body input:focus {outline-offset: -1px !important;}

  37. /*淡藍色樣式*/
  38. a{-webkit-transition: all 0.3s ease-out;}
  39. a:hover{color: #39F !important;text-shadow:-5px 3px 18px #39F !important;-webkit-transition: all 0.3s ease-out;}
  40. *::-webkit-selection {background: #333333 !important; color: #00FF00 !important; }

  41. /*去除下劃線*/
  42. *{text-decoration:none!important}
  43. a:hover{text-decoration:none!important}

  44. a{
  45. /*color: #014A8F;*/
  46. -webkit-transition-property:color;
  47. -webkit-transition-duration: 0.0s;
  48. }

  49. /*指向文字加粗*/
  50. a:hover {
  51. /*color: #0000FF ;*/
  52. -webkit-transition-property:color;
  53. -webkit-transition-duration: 0.0s;
  54. font-weight:bold
  55. }

  56. /*訪問過鏈接紅色*/  
  57. a:visited, a:visited *, a:active, a:active * {color: #FF0000 !important;}

創作回應

道攸
先給GP,明天測試[e12]
2013-10-02 01:20:38

更多創作