zoukankan      html  css  js  c++  java
  • CSS -- 非常实用的css技巧

    文本选择颜色

    ::selection {
      background-color: #616161;
      color: #e0e0e0;
    }
    

    首字下沉

    article p:first-of-type::first-letter {
      color: #616161;
      float: left;
      font-family: Georgia;
      font-size: 4rem;
      line-height: 4vw;
      padding-right: 8px;
    }
    

    平滑滚动

    html {
      scroll-behavior: smooth!important;
    }
    

    输入插入符号颜色

    .form__input {
       80%;
      height: 4vw;
      outline: 0;
      border: 0;
      border-radius: 4vw;
      background-color: #e0e0e0;
      box-shadow: inset 4px 4px 6px #757575, inset -6px -6px 6px #f5f5f5;
      padding: 0 0 0 1vw;
      font: 400 1vw "Roboto", sans-serif;
      color: #212121;
      caret-color: #d32f2f;
    }
    

    投影

    使用投影为透明图像提供更好的阴影效果

    .img-wrapper img {
       100%;
      height: 100%;
      object-fit: cover;
      filter: drop-shadow(30px 10px 4px #757575);
    }
    

    文本居中显示

    main {
       100%;
      height: 80vh;
      display: grid;
      place-items: center center;
    }
    

    自定义滚动条

    .content-wrapper {
       800px;
      height: 400px;
      overflow: auto;
    }
    .content-wrapper::webkit-scrollbar {
       12px;
      background-color: #bdbdbd;
      border-radius: 1vw 1vw 1vw 1vw;
    }
    .content-wrapper::webkit-scrollbar-thumb:hover {
      background-color: #757575;
    }
    .content-wrapper::webkit-scrollbar-thumb:active {
      background-color: #616161;
    }
    

    禁用用户选择

    .content-header h2 {
      user-select: none;
    }
    

    竖排文字

    .slidebar h2 {
      writing-mode: tb-rl;
      transform: rotate(-180deg);
    }
    

    参考文章

  • 相关阅读:
    Odoo13在Win10(专业版)中的配置
    我在博客园安家了
    2012笔记
    你给我好好发邮件行不行
    事务经典例子
    轻松实现SQL Server与Access、Excel数据表间的导入导出
    SQL大全
    小笔记
    性能优化
    程序中的异常和错误处理
  • 原文地址:https://www.cnblogs.com/lisaShare/p/15129393.html
Copyright © 2011-2022 走看看