css 进阶使用样式

博主自己使用，有喜欢的可以看一下，不喜欢别骂。

滚动条

滚动条的属性代码：overflow

auto : 　在需要时剪切内容并添加滚动条。

hidden : 不显示超过对象高度的内容

scroll : 总是显示纵向滚动条。

图片

图片模糊

filter: blur(30px);

图片缩放:

transform: scale(1.1);

图片不改变原大小居中铺满:

父级:
    position: relative;
    padding-bottom: 28%;

子集:
    object-fit: cover;
    position: absolute;

图片颜色变黑或白

-webkit-filter: brightness(0) invert(0.3);
filter: brightness(0) invert(0.3);

字体

文字间距

letter-spacing: 2px;

文字阴影

text-shadow: 0px 0px 1px #1cb9c8;

文字不换行

white-space: ;

normal：默认值，合并多余空白，文字不换行，文字在一行上放不下就自动换行；

nowrap：不换行，这相当于把normal和pre的特性结合起来；

pre：保留多余空白、不合并、不换行，如果需要换行需要手动添加`

pre-wrap：保留多余空白、不合并、自动换行，如果出现需要换行的情况，则自动进行换行；

pre-line：合并多余空白，文字在一行上放不下就自动换行。

文字超出省略号

text-overflow: ;

clip：将文本截断，并隐藏超出部分，不添加省略符号；
ellipsis：将文本截断，并隐藏超出部分，添加省略符号（...）

input placeholder 的字体颜色 

 input::-webkit-input-placeholder { color: #ffffff8a;}
 input::-moz-placeholder { color: #ffffff8a;}/* Mozilla Firefox 19+ */
 input:-moz-placeholder { color: #ffffff8a; } /* Mozilla Firefox 4 to 18 */
 input:-ms-input-placeholder { color: #ffffff8a;}/* Internet Explorer 10-11 */

英文全部大写

text-transform:uppercase;

动画

animation: zhuan 5.5s linear infinite; 

@keyframes zhuan {
            0% {transform: rotate(0deg);}
            50% {transform: rotate(180deg);}
            100% {transform: rotate(360deg);}
        }

select 去除下拉三角

appearance:none;
-moz-appearance:none; /* Firefox */ 
-webkit-appearance:none; /* Safari 和 Chrome */

鼠标小手

cursor: pointer;

 

hover里面内容执行时间:

transition: 0.5s;

选择第一个和最后一个:

:first-child  第一个

:last-child  最后一个

限制文字行数:

display: -webkit-box;

-webkit-box-orient: vertical;

-webkit-line-clamp: 4;

overflow:hidden;

选择第几:

:nth-child()

限制宽或高

 当自适应宽度达到设定值，运行代码

@media screen and (max-width:1600px){  }

swiper轮播图限制宽度显示个数

breakpoints: {
           
 999: {
                
     slidesPerView:2,
           
 },
           
 599: {
               
     slidesPerView:1,
        
 },
     
},

形状盒子:

    border-top: 25px solid #f6f7fb;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-bottom: 0px solid transparent;

textarea 去除右下三条线

resize: none;