css使用心得

最新推荐文章于 2025-05-14 08:07:58 发布

Burcher

最新推荐文章于 2025-05-14 08:07:58 发布

阅读量46

点赞数

文章标签： css 前端

本文链接：https://blog.youkuaiyun.com/m0_37682007/article/details/131300528

版权

文章介绍了如何在前端实现元素的整体缩放，保持大小不变的技巧，以及使用CSS修改Chrome和Firefox浏览器的默认滚动条样式。同时提到了获取文本宽度的JavaScript方法，针对canvas和普通网页元素的不同处理。此外，还推荐了一个CSS抖动效果库CSShake。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

元素整体缩放，大小不变；

    width: 125%;
    transform: scale(0.8);

获取文本宽度方法：

    // 网页插入标签，获取offsetWidth
   function getTextWidth2(text, fontSize, fontWeight = 'normal', family = 'sans-serif') {
      const _span = document.createElement('span');
      _span.style.position = 'absolute';
      _span.style.visibility = 'hidden';
      _span.style.fontSize = fontSize + 'px';
      _span.style.fontWeight = fontWeight;
      _span.innerText = text;
      document.body.appendChild(_span);
      let width = _span.offsetWidth;
      document.body.removeChild(_span);
      // 返回span宽度
      return width
   }
   // canvas获取
   function getTextWidth(text, fontSize = 12, fontWeight = 'normal', family = 'sans-serif') {
      if(getTextWidth.canvas) {
        getTextWidth.canvas = null
      }
      getTextWidth.canvas = document.createElement("canvas")
      var ctx = getTextWidth.canvas.getContext("2d"); 
      ctx.font = 'bold ' + fontSize + 'px' + family;
      var metrics = ctx.measureText(text);
      return metrics.width;
   }

修改Chrome、Firfox浏览器默认滚动条样式

   /* chrome start */

  /* 滚动条 */
  ::-webkit-scrollbar {
    width: 8px;
  }
  /* 滚动条上下按钮 */
  ::-webkit-scrollbar-button {
    display: none;
  }
  /* 滚动条内部滑块 */
  ::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: #ddd;
    cursor: pointer;
  }
  ::-webkit-scrollbar-thumb:hover {
    cursor: pointer;
    background-color: rgb(210, 210, 210);
  }
  /* 滚动条背景色 */
  ::-webkit-scrollbar-track {
    border-radius: 4px;
    background-color: white;
  }

  /* chrome end */

  /* firfox start */
  /* scrollThumbColor scrollTrackColor */
  scrollbar-color: #ddd white;
  /* auto/thin/none/len */
  scrollbar-width: thin;

  /* firfox end */