526互联

26个CSS超实用技巧

发布时间 2023-10-16 15:27:58作者: 蓦然JL

1.文字溢出显示省略号

  • 单行文字：

一定要设置宽度

p{
​
•       width:200px;
​
•       overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap;
​
​
​
}
  • 多行文字溢出显示省略号
    p{
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:3;
    overflow:hidden;
    }

2.中英文自动切换

只对英文起作用

p{
    word-wrap:break-word;
    white-space:normal;
    word-break:break-all
}

3.文字阴影

h1{
    text-shadow:5px 5px 5px #ff0000;
}

4.设置placeholder的字体样式

input::-webkit-input-placeholder{
​
•   color:red
​
}

5.不固定高宽 div 垂直居中的方法

  • 方法一
.box{
    display:inline-bolck;
    vertical-align:middle;
}
  • 方法二 flex
    .box-wwrap{
    height:300px;
    jusstify-content:center;
    align-items:center;
    display:flex;
    background-color:#666;
    }

6.解决IOS页面滑动卡顿

body,html{
    -webkit-overflow-scrolling:touch;
}

 

7.用css实现带边框的三角形

<div id="blue"></div>
#blue{
    positon:relative;
    width:0;
    height:0;
    border-width:o 40px 40px;
    border-style:solid;
    border-color:transparent transparent blue;
}
#blue:after{
    content:'';
    positon:absolute;
    top:1px;
    left:-38px;
    border-width:0 38px 38px;
    border-style:solid;
    border-color:transparent transparent yellow;
}

 

8.Table表格 边框合并

table ,tr,td{
    border:1px solid #666;
}
table{
    border-collapse:collapse;
}

 

9.文字之间的距离

p{
    text-indent:10px;//单词抬头距离
    letter-spacing:10px;//间距
}

 

10.元素占满整个屏幕

.dom{
    width:100%;
    heigbt:100vh;//height如果使用100%，会根据父级的高度来决定，所以使用100vh单位
}

 

11.CSS实现文字两端对齐

.wrap{
    text-align:justify;
    text-justify:distribute-all-lines;
    text-align-last:justify;
    -moz-text-align-last:justify;
    -webkit-text-align-last：justify;
}

 

12.实现文字竖向排版

.wrap{
    width:15px;
    line-height:18px;
    height:auto;
    font-size:12px;
    padding:8px 5px;
    word-wrap:break-word;//英文的时候需要加上这个  自动换行
}

 

13.使元素鼠标事件失效

.wrap{
    pointer-events:none;
    cursor:default;
}

 

14.使硬件加速 可以有效的减少资源的利用

.wrap{
    transform:translateZ(0);
}

 

15.将一个容器设置为透明

.wrap{
    filter:alpha(opacity=50);
    -moz-opacity:0.5;
    -khtml-opacity：0.5；
    opacity:0.5;
}

 

16.select内容居中显示 下拉内容右对齐

select{
    text-align:center;
    text-align-last:center;
}
select option{
    direction:rtl;
}

 

17.修改input输入框中光标的颜色 不修改文字的颜色

input{
    color:#fff;
    caret-color:red;
}

 

18.子元素固定宽度 父元素宽度被撑开

//父元素下的子元素是行内元素
.wrap{  
    white-space:nowrap;
}
//父元素下的子元素是块级元素
.wrap{
    white-space:nowrap;//z子元素不被换行
    dispaly:inline-block;
}

 

19.让div里的图片和文字同时上下居中

//通过vertival-align来达成效果
.wrap{
    height:100;
    line-height:100;
    
}
img{
    vertival-align:middle;//行内元素起作用
}

 

20.实现宽高等比例自适应矩形

<div class="scale">
    <div class="item">
        这里是所有字元素的容器
    </div>
</div>
.scale{
    width:100%;
    padding-bottom:56.25%;
    height:0'
    position:relative;
}
.item{
    position:absolute;
    width:100%;
    height:100%;
    background-color:#99900;
}

 

21.文字渐变效果实现

<div class="text">你好呀</div>
.text{
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-image:linear-gradient(to right,#ec2239,#40a4e2,#ea96f5);
    width:320px;
}

 

22.好看的背景渐变

<div class="text"></div>
.text{
    width:500px;
    height:100px;
    background:linear-gradient(25deg,rgb(79,107,208),rgb(98,141,185),rgb(102,175,161),rgb(92,210,133),rgb(182,228,253));
}

 

23.实现立体字的效果

<div class="text">你好呀</div
.text{
    font-size:32px;
    text-align:center;
    font-weight:bold;
    line-height:100px;:relative;
    background-color:#33;
    color:#fff;
    text-shadow:
    0 1px 0 #cococo,
    0 2px 0 #b0b0b0,
    0 3px 0 #a0a0a0,
    0 4px 0 #909090,
    0 5px 10px rgba(0,0,0,0.6);
}

 

24.全屏背景图片的实现

.swper{
    background-imgage:url(./img/bg.jpg);
    width:100%;
    height:100%;//父级高不为100%时请使用100vh
    zoom:1;
    background-color:#fff;
    background-repeat:no-repeat;
    background-size:cover;
    -webkit-background-size:cover;
    -o-background-size:cover;
    background-position:center 0 ;
    
}

 

25.元素透明度的实现

//普通方式
.dom{
    opacity:0.4;
    filter:alpha(opacity=40);
}
//设置颜色透明度
.demo{
    background:rgba(255,0,0,1);
}

 

26.图片自适应

img{
    width:100%;
    height:100%;
    object-fit:cover;
}