css【实用】
时间：2023-03-30 22:32:08
CSS
实用样式如下：宽高慎用，尽量不要加入bug和兼容问题清除浮动。添加/*css*/.className::after{content:'';显示：块；clear:both;}浮动父级中的rem算法/*css*/html{font-size:62.5%;}/*兼容IE9以下*/body{font-size:14px;字体大小：1.4rem；}/*=14px*/h1{字体大小：24px；字体大小：2.4rem；}/*=24px*/单行溢出变化点:/*css*/.className{text-overflow:ellipsis;空白：nowrap；overflow:hidden;}多行溢出变化一点点:/*css*/.className{overflow:hidden;显示：-webkit-box；//将对象显示为灵活的盒子模型。文本溢出：省略号；//可以在多行文本的情况下使用，使用省略号“...”隐藏超出范围的文本。-webkit-box-orient：垂直；//设置或获取flexbox对象的子元素的排列。-webkit-line-clamp:2;//限制块元素中显示的文本行数。}两端文本对齐：css/*中文文本两端对齐*/.className1{text-align:justify;text-justify:inter-ideograph}/*两端英文??文本对齐*/.className1{text-align:justify;text-justify:newspaper}如何在css中取消选中第一个和最后一个？tr:not(:first-child):hover{background:#ffffdd;}/*如果上面的代码有问题，使用下面的代码会更安全：not(class)*/.b:not(.b-n):hover{background:#ffffdd;}imagegreyedoutwithprimarycolor/*css*/.gray{//gray-webkit-filter:grayscale(100%);-moz-filter:灰度(100%);-ms-filter:灰度(100%);-o-滤镜：灰度（100%）；滤镜：灰度（100%）；filter:gray;}.init{//原色-webkit-filter:grayscale(0%);-moz-filter:灰度(0%);-ms-filter:灰度(0%);-o-filter：灰度（0%）；过滤器：灰度（0%）；filter:;}清除默认样式a/*css*/.className1{text-decoration:none;out-line:none;}点击跳转页面/*html*/在新窗口跳转到百度
在当前窗口跳转到百度 clear:hover/*css*/li:not(.uesr-choose):hoverdiv{height:50px}到指定div下;/*:not(.uesr-choose)写要清除的class然后写hover*/inputandtextareatextisnotuniform/*css*/input::-webkit-input-placeholder{color:#999999;font-size:14px;font-family:"MicrosoftYahei";}textarea::-webkit-input-placeholder{color:#999999;font-size:14px;font-family:"MicrosoftYahei";}输入选中的样式input:focus{outline-color:#fa9c08;}修改浏览器滚动条样式.xxx::-webkit-scrollbar{/*滚动条整体样式*/width:4px;/*高度和宽度分别对应水平和垂直滚动的条的大小*/height:4px;}.xxx::-webkit-scrollbar-thumb{/*滚动条内的小方块*/border-radius:5px;-webkit-box-shadow:inset005pxrgba(0,0,0,0.2);background:rgba(0,0,0,0.2);}.xxx::-webkit-scrollbar-track{/*滚动条内的轨道*/-webkit-box-shadow:inset005pxrgba(0,0,0,0.2);边界半径：0；background:rgba(0,0,0,0.1);}textarea修改样式textarea{resize:none;//禁止缩放}textarea:focus{//设置点击选中边框outline:none;边框：1px实心#f60；}选择ect,option修改样式select,option{/*Chrome和Firefox的边框不同，重写*/border:none;大纲：无；/*非常关键：清除默认的select选择框样式*/appearance:none;-moz外观：无；-webkit-外观：无；/*将背景改为红色*/background:#fff;/*添加padding防止文字覆盖*/padding-right:.14rem;}/*清除ie默认选择框样式，隐藏下拉箭头*/select::-ms-expand{display:none;}filterfilter-webkit-filter:hue-rotate(90deg);/*Chrome,Safari,Opera*/filter:hue-rotate(90deg);过滤html写法Hue-rotatefilter:hue-rotate(90deg);亮度Brightnessfilter：亮度（300%）；对比Contrastfilter:contrast(0%);GrayscaleGrayscalefilter:灰度(0%);SaturationSatratefilter：饱和（0%）；棕色Sepiafilter：棕褐色（100%）；反色Invertfilter：invert(100%)；模糊Blurfilter:blur(1px);TransparencyOpacityfilter:opacity(75%);ShadowDropShadowfilter:drop-shadow(5px5px10px#666);url()[下面是html写法]filter:url('#greenish');/*HTML(url写法)*/
img模糊/*img不模糊*/img{image-rendering:-moz-crisp-edges;/*火狐*/image-rendering:-o-crisp-edges;/*Opera*/image-rendering:-webkit-optimize-contrast;/*Webkit（非标准命名）*/image-rendering:crisp-edges;-ms-插值模式：最近邻；/*IE（非标准属性）*/}
