Css笔记

样式采集

1. /*高斯模糊*/
   filter:blur(5px);
   /*背景模糊*/
   backdrop-filter:blur(5px);
   -webkit-backdrop-filter:blur(5px);
   /*顶层不遮挡*/
   pointer-events: none;
   

2. /* 多行省略 */
   overflow-hidden overflow-ellipsis display-[-webkit-box] -webkit-line-clamp-[2] -webkit-box-orient-[vertical]
   
   {
     overflow : hidden;
       text-overflow: ellipsis;
       display: -webkit-box;
       -webkit-line-clamp: 2;
       -webkit-box-orient: vertical;
   }
   
   /* 单行省略 */
   overflow-hidden overflow-ellipsis whitespace-nowrap
   
   {
     overflow: hidden;
       text-overflow: ellipsis;
   	white-space: nowrap;
   }
   /* 将省略打点的位置 */
   {
     direction: rtl;
     /* 定义了文本水平或垂直排布以及在块级元素中文本的行进方向 */
     writing-mode: unset;
     
     unicode-bidi: bidi-override
   }
   

3. 滚动条样式

   .form::-webkit-scrollbar {
     -webkit-appearance: none;
     width: 4px;
   }
   textarea::-webkit-scrollbar {
     -webkit-appearance: none;
     background: transparent;
   }
   .form::-webkit-scrollbar-thumb,
   textarea::-webkit-scrollbar-thumb {
     background: #ccc;
     border-radius: 2px;
     display: none;
   }
   
   .form:hover::-webkit-scrollbar-thumb {
     display: block;
   }
   .form::-webkit-scrollbar-track,
   textarea::-webkit-scrollbar-track {
     background-color: transparent;
     display: none;
   }
   
   /* 用户选择属性  鼠标选择
   user-select:none/text/all/auto
   */
   
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
   

4. 粘性定位

   position:sticky;
   /*
   上级容器无overflow:hidden / scroll
   父级容器高度需足够   无法超出父级容器
   */
   

5. css 媒体查询当前系统主题

   @media (prefers-color-scheme: light) { /*light : 浅色*/
     /*主题设置为深色。*/
     }
   }
   @media (prefers-color-scheme: dark) { /*dark : 深色*/
     /*主题设置为浅色。*/
   }
   

6. css 恢复 样式

   all: revert;
   

7. Css 容器比例

   aspect-ratio: 1 / 1;
   

8. css 融合样式 by svg

    <svg
         width="0"
         height="0"
         class="absolute hidden"
         color-interpolation-filters="sRGB"
       >
         <defs>
           <filter id="buttonFilter">
             <feGaussianBlur
               in="SourceGraphic"
               stdDeviation="5"
               result="blur"
             ></feGaussianBlur>
             <feColorMatrix
               in="blur"
               mode="matrix"
               values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -9"
               result="buttonFilter"
             ></feColorMatrix>
             <feComposite
               in="SourceGraphic"
               in2="buttonFilter"
               operator="atop"
             ></feComposite>
             <feBlend in="SourceGraphic" in2="buttonFilter"></feBlend>
           </filter>
         </defs>
       </svg>
   <!-- a 标签不可有背景色 -->
       <a class="" style="filter: url(#buttonFilter)">
         <div class="w-[30px] h-[30px] bg-[#409eff] rounded-full"></div>
         <div class="w-[30px] h-[30px] bg-[#409eff] rounded-full"></div>
   	</a>