@charset "utf-8"; /* 禁止浏览器调整字体大小 */ *{-webkit-text-size-adjust:none;} /* 取消<a>标签在移动端点击时的蓝色 */ a{-webkit-tap-highlight-color:rgba(255,255,255,0);} /* 修改鼠标光标 */ a{cursor:url(../img/demo.cur),auto;} /* 设置输入框内光标的颜色 */ 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:contain;} /* 颜色透明 */ .transparent{color:transparent;} /* 宽度适应内容 */ .width-fit-content{width:fit-content;} /* 使用fixed定位的元素水平居中 */ .fixed-center{position:fixed;right:0;left:0;margin:0 auto;} /* 使用flex布局的元素的内部文字垂直居中和水平居中 */ .flex-center{display:flex;flex-wrap:wrap;align-content:center;justify-content:center;align-items:center;} /* 圆形 */ .circular{border-radius:50%;} /* 背景色调整透明度，第四个参数Alpha取值范围是[0, 1]，其中0=透明，1=不透明） */ .background-rgba{background:rgba(255,0,0,.6);} /* 禁止换行时截断单词（一个长单词如果碰上换行被截断在左右两端很影响阅读） */ .break-word{word-wrap:break-word;word-break:normal;} /* 元素的宽高比始终保持固定数值（示例：无论设备分辨率多少，宽度为80%，且宽高比固定为16:9） */ .container{width:80%;aspect-ratio:16/9;} /* 动画效果·360度旋转 */ @keyframes mn-transform-rotate{0%{transform:rotate(0);}to{transform:rotate(1turn);}} .mn-animation-rotate{-webkit-animation-name:mn-transform-rotate;animation-name:mn-transform-rotate;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-timing-function:linear;animation-timing-function:linear;} /* 动画效果·无限循环（需要结合其它动画效果一起使用） */ .mn-animation-loop{-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;} /* 隐藏滚动条 */ /* 备注：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 © 2024 码农人生. All Rights Reserved