☰

网页页面样式美化

指向文字加粗, 指向图片发光, 指向图片放大动画, 输入框美化, 去除下划线, 选择文字高亮颜色, 链接更改颜色, 图片圆角

目前为 2024-03-09 提交的版本。查看 最新版本。

// ==UserScript==
// @name        网页页面样式美化
// @namespace   网页页面样式小美化
// @description 指向文字加粗, 指向图片发光, 指向图片放大动画, 输入框美化, 去除下划线, 选择文字高亮颜色, 链接更改颜色, 图片圆角
// @version     0.1
// @grant       GM_addStyle
// @match       *://*/*
// ==/UserScript==

(function() {
  let css = `
    /* 图片 */
    img {
      transition: transform 0.5s ease !important;
      border-radius: 8px !important; /* 可选：添加圆角 */
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3) !important;; /* 添加阴影效果 */
      -webkit-transition-property: box-shadow;
      -webkit-transition-duration: .31s;
    }
    /* 指向图片 */
    img:hover {
      transform: scale(1.05); /* 可选：放大图片 */
      box-shadow: 0px 0px 4px 4px rgba(217, 99, 150, 0.6) !important;
      -webkit-transition-property: box-shadow;
      -webkit-transition-duration: .31s;
    }

    /* 输入框美化 */
    input[type="text"]:focus, input[type="password"]:focus, textarea:focus { 
      outline: 2px solid #D96396 !important; 
      -webkit-box-shadow:0px 0px 0px #D96396 !important;
    } 
    input[type="checkbox"]:focus, input[type="submit"]:focus, input[type="reset"]:focus, input[type="radio"]:focus { 
      outline: 1px solid #4C7CD0 !important;
      border-radius: 8px !important;  /* 圆角度数 */
    }
    
    /* 选择文字自定义高亮颜色 */
    ::selection {
      background-color: #D96396 !important; /* 修改这里的颜色 */
      color: #ffffff !important; /* 修改这里的颜色 */
    }

    /* 链接样式 */
    a {
      /* 去除下划线 */
      text-decoration: none !important;
      -webkit-transition-property: color;
      -webkit-transition-duration: 0.0s;

      color: #5D87A6 !important;  /* 链接颜色 */
      /* text-decoration:underline dotted; /* 虚线下划线 */
      /* underline; /* 普通下划线 */
      /* underline double; /* 双下划线 */
      /* underline wavy; /* 波浪线下划线 */
      transition: color 0.5s ease; /* 链接颜色变化动画 */
    }
    /* 指向链接 */
    a:hover {
      color: #FF5733; /* 悬停时的链接颜色 */
      /* 指向文字加粗 */
      text-shadow: 0em 0em 0.1em !important;  //font-weight:bold解决跳动
      font-weight: bold !important;
      color: #FFFFFF !important; /* 修改这里的颜色 */
      /* 去除下划线 */
      text-decoration: none !important;
      -webkit-transition-property: font-weight, color;
      -webkit-transition-duration: 0.0s;
   }

 `;

  if (typeof GM_addStyle !== "undefined") {
    GM_addStyle(css);
  } else {
    let styleNode = document.createElement("style");
    styleNode.appendChild(document.createTextNode(css));
    (document.querySelector("head") || document.documentElement).appendChild(styleNode);
  }

})();