冷门但有用的CSS代码

/* 禁止浏览器调整字体大小 */
*{-webkit-text-size-adjust:none;}

/* 取消<a>标签在移动端点击时的蓝色 */
a{-webkit-tap-highlight-color:rgba(255,255,255,0);}

/* 设置输入框内光标的颜色 */
input{caret-color:red;}

/* 禁止选中标签内的文本 */
p{user-select:none;}

/* 一行显示文字,超出部分用“...”代替 */
p{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

/* 两行显示文字,超出部分用“...”代替 */
p{display:-webkit-box;overflow:hidden;text-overflow:-o-ellipsis-lastline;text-overflow:ellipsis;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;}

/* 设置表格布局算法 */
table{table-layout:fixed;}

/* 解决<li>设置float后<ul>高度为0的问题 */
ul:after{clear:both;display:block;content:"";}

/* 将<img>或<video>元素进行保留原始比例的剪切、缩放或者直接进行拉伸等                                                       */
/*                                                                                                                          */
/* 可选值:                                                                                                                 */
/* ------------------------------------------------------------------------------------------------------------------------ */
/* fill       :默认,不保证保持原有的比例,内容拉伸填充整个内容容器。                                                      */
/* contain    :保持原有尺寸比例。内容被缩放。                                                                              */
/* cover      :保持原有尺寸比例。但部分内容可能被剪切。                                                                    */
/* none       :保留原有元素内容的长度和宽度,也就是说内容不会被重置。                                                      */
/* scale-down :保持原有尺寸比例。内容的尺寸与 none 或 contain 中的一个相同,取决于它们两个之间谁得到的对象尺寸会更小一些。 */
/* initial    :设置为默认值。                                                                                              */
/* inherit    :从该元素的父元素继承属性。                                                                                  */
.img-video{width:250px;height:250px;object-fit:cover;}

/* 颜色透明 */
.transparent{color:transparent;}

/* 使用fixed定位的元素水平居中 */
.fixed-center{position:fixed;right:0;left:0;margin:0 auto;}

/* 使用flex布局的元素的内部文字垂直居中和水平居中 */
.flex-center{display:flex;align-items:center;justify-content:center;}

/* 圆形 */
.circular{border-radius:50%;}

/* 背景色调整透明度,第四个参数Alpha取值范围是[0, 1],其中0=透明,1=不透明) */
.background-rgba{background:rgba(255,0,0,.6);}

/* 隐藏滚动条                                            */
/* 备注:scrollbar-width是针对Firefox浏览器。            */
/* 备注:-ms-overflow-style是针对IE浏览器。              */
/* 备注:::-webkit-scrollbar是针对Chrome和Safari浏览器。 */
.scrollbar-hidden{scrollbar-width:none;-ms-overflow-style:none;}
.scrollbar-hidden::-webkit-scrollbar{display:none;}

/* 修改滚动条样式                                                                                                                     */
/* 备注:双冒号前没有其它内容则任意元素均有效,若想只对特定元素有效可这样写:body::-webkit-scrollbar{} 或 .xxx::-webkit-scrollbar{}。 */
/* 备注:::-webkit-scrollbar{}的width是设置垂直滚动条的宽度,height设置水平滚动条的宽度。                                             */
::-webkit-scrollbar{width:15px;height:15px;}
::-webkit-scrollbar-track{background:red;}
::-webkit-scrollbar-thumb{background:#00f;}
::-webkit-scrollbar-thumb:hover{background:#0f0;}

/* 设置选中文字背景色和字体色(注:仅对以上两者有效,其它设置均无效) */
p::selection{background:green;color:red;}

/* 全站黑白色调 */
.gary-body{filter:grayscale(100%);-webkit-filter:grayscale(100%);-moz-filter:grayscale(100%);-ms-filter:grayscale(100%);-o-filter:grayscale(100%);-webkit-filter:grayscale(1);}

Copyright © 2023 码农人生. All Rights Reserved