常用一些css技巧

1.字体渐变

.time{width:1200px;font-size:18px;color:#bfbfcf;text-align: center;background: linear-gradient(to bottom, #ffeca0, #ffffff);-webkit-background-clip: text;color: #fff;-webkit-text-fill-color: transparent;text-fill-color:transparent;}
//这里主要是兼容ie浏览器
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
.time{background: transparent;color:#bfbfcf;}
}

 

2.屏幕宽度小于1400时侧导航隐藏
@media only screen and (max-width: 1400px) {
    .nav-right{
       display:none;
     }
}

 

3.文字一行显示超出以省略号显示以及超过多行以省略号显示

（1）文字一行：white-space: nowrap;text-overflow: ellipsis;overflow: hidden;word-break: break-all;

（2）文字多行（2行）（该方法适用于WebKit浏览器及移动端）text-overflow: -o-ellipsis-lastline;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;line-clamp: 2;-webkit-box-orient: vertical;

 

4.背景渐变兼容各个浏览器
  background: -webkit-linear-gradient(left, #0294c9, #0deda8);
  background: -o-linear-gradient(left,#0294c9, #0deda8);
  background: -moz-linear-gradient(left,#0294c9, #0deda8);
  background: -ms-linear-gradient(left,#0294c9, #0deda8);
  filter:progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#0294c9,endColorStr=#0deda8);

 

5.修改select下拉按钮的样式是自定义的：

  select::-ms-expand { display:none; }//隐藏自带的样式

  （1）引入图片的方法 （样式类名视自己情况而定）

    select

    {

      height:30px;

     line-height:28px;

     padding:0 16px 0 5px;
     border:1px solid #e4e4e4;
     background: url("/zbw/img/mobile/public/icon/sjxdown.png") right center no-repeat #fff;
     background-size:16px;
     text-align:left;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
     appearance:none;
     -moz-appearance:none;
     -webkit-appearance:none;
     cursor:pointer;
   }

  （2）自制小三角（样式类名视自己情况而定，pop1-sle-w为包裹select的父级元素  pop1-sle是select标签的类名 ）

    .pop1-sle-w{width:2.87rem;height: 0.26rem;position: relative;align-self: center;-webkit-align-self: center;}

    .pop1-sle{display:block;width:2.87rem;height: 0.26rem; text-indent: 0.16rem;-webkit-appearance: none;background:#138775; color:#ffffff;font-size: 0.2rem; border:none; line-height:0.26rem; border-radius:0rem;}

    .pop1-sle-w:after{content:"";width: 0;height: 0;border-left:0.1rem solid transparent;border-right:0.1rem solid transparent;border-top:0.1rem solid #fff;position:absolute;top: 0.1rem;right: 0.13rem;pointer-events: none;}

 

 6.图片作为边框

   {

    padding:1em;
    border:1em solid transparent;
   background:linear-gradient(white,white),url(stone-art.jpg);
   background-size:cover;
   background-clip:padding-box border-box;
   background-origin:border-box;
}

 

7.不规则投影

 {

    filter:drop-shadow(2px 2px 10px rgba(0,0,0,0.5));
}

8.毛玻璃效果

 body,main::before{

       background:url('tt.jpg') 0 / cover fixed;
 }
main{
     position:relative;
    background:hsla(0,0,100%,.3);
     overflow:hidden;
}
main:before{
     content:'';
     positon:absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    filter:blur(20px);
    margin:-30px;
}

9.图片加载失败  优化处理

  <img src="zxx.png" alt="CSS新世界封面" onerror="this.classList.add('error');">

  img.error {

    display: inline-block;
    transform: scale(1);
    content: '';
    color: transparent;
}

img.error::before {
  content: '';
  position: absolute;
  left: 0; top: 0;
  width: 100%; height: 100%;
  background: #f5f5f5 url(break.svg) no-repeat center / 50% 50%;
}
img.error::after {
  content: attr(alt);
  position: absolute;
  left: 0; bottom: 0;
  width: 100%;
  line-height: 2;
  background-color: rgba(0,0,0,.5);
  color: white;
  font-size: 12px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

<!-- 图片外联地址 -->
img.error::before {
 background: #f5f5f5 url("data:image/svg+xml,%3Csvg class='icon' viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cpath d='M304.128 456.192c48.64 0 88.064-39.424 88.064-88.064s-39.424-88.064-   88.064-88.064-88.064 39.424-88.064 88.064 39.424 88.064 88.064 88.064zm0-116.224c15.36 0 28.16 12.288 28.16 28.16s-12.288 28.16-28.16 28.16-28.16-12.288-28.16-28.16 12.288-28.16 28.16-28.16z' fill='%23e6e6e6'/%3E%3Cpath   d='M887.296 159.744H136.704C96.768 159.744 64 192 64 232.448v559.104c0 39.936 32.256 72.704 72.704 72.704h198.144L500.224 688.64l-36.352-222.72 162.304-130.56-61.44 143.872 92.672 214.016-105.472 171.008h335.36C927.232     864.256 960 832 960 791.552V232.448c0-39.936-32.256-72.704-72.704-72.704zm-138.752 71.68v.512H857.6c16.384 0 30.208 13.312 30.208 30.208v399.872L673.28 408.064l75.264-176.64zM304.64 792.064H165.888c-16.384 0-30.208-   13.312-30.208-30.208v-9.728l138.752-164.352 104.96 124.416-74.752 79.872zm81.92-355.84l37.376 228.864-.512.512-142.848-169.984c-3.072-3.584-9.216-3.584-12.288 0L135.68 652.8V262.144c0-16.384 13.312-30.208 30.208-   30.208h474.624L386.56 436.224zm501.248 325.632c0 16.896-13.312 30.208-29.696 30.208H680.96l57.344-93.184-87.552-202.24 7.168-7.68 229.888 272.896z' fill='%23e6e6e6'/%3E%3C/svg%3E") no-repeat center / 50% 50%;
}

10.“边框法” 实现对话气泡框

.test{width:300px; padding:30px 20px; border:5px solid #beceeb; position:relative;}

.test span{width:0; height:0; font-size:0; overflow:hidden; position:absolute;}

.test span.bot{border-width:20px;border-style:solid dashed dashed;border-color:#beceeb transparent transparent;left:80px;bottom:-40px;}.test span.top{border-width:20px;border-style:solid dashed dashed;border-color:#ffffff transparent transparent;left:80px;bottom:-33px;}

<div class="test>

    <span class="bot"></span>
    <span class="top"></span>
    CSS “边框法”实现气泡对话框效果二
</div>