自己css常用样式

发表于

1.设置图片等比例缩放 背景

1
2
3

background: url('/public/img/bg1.png') no-repeat center top;
background-size: 100%;

2.设置button 点击样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

 .ripple {
     position: relative;
     //隐藏溢出的径向渐变背景
     overflow: hidden;
   }
.ripple:after {
     content: "";
     display: block;
     position: absolute;
     width: p2m(100px);
     height: p2m(100px);
     top: 0;
     left: 0;
     pointer-events: none;
     //设置径向渐变
     background-image: radial-gradient(circle,#F5F5F5 10%, transparent 10.01%);
     background-repeat: no-repeat;
     background-position: 50%;
     transform: scale(10, 10);
     opacity: 0;
     transition: transform .3s, opacity .5s;
   }

   .ripple:active:after {
     transform: scale(0, 0);
     opacity: .3;
     //设置初始状态
     transition: 0s;
   }

2-1 点击样式

1
2
3
4
5
6
7
/*  <!-- 这边是按下后的效果-->*/
    &:active {
      padding-bottom:p2m(1px);
      padding-left:p2m(1px);
      padding-right:p2m(1px);
      padding-top:p2m(1px);                    /*  <!-- 上面是按下文字偏移的像素-->*/
    }

3. 设置渐变样式

1
2
3
4
5
6
7
8
.gradient{
   filter:alpha(opacity=100 finishopacity=50 style=1 startx=0,starty=0,finishx=0,finishy=150) progid:DXImageTransform.Microsoft.gradient(startcolorstr=#ffffff,endcolorstr=#FFDAD6,gradientType=0);
   -ms-filter:alpha(opacity=100 finishopacity=50 style=1 startx=0,starty=0,finishx=0,finishy=150) progid:DXImageTransform.Microsoft.gradient(startcolorstr=#ffffff,endcolorstr=#FFDAD6,gradientType=0);/*IE8*/
   background:#ffffff; /* 一些不支持背景渐变的浏览器 */
   background:-moz-linear-gradient(top, #ffffff, #FFDAD6);
   background:-webkit-gradient(linear, 0 0, 0 bottom, from(#ffffff), to(#FFDAD6));
   background:-o-linear-gradient(top, #ffffff, #FFDAD6);
 }

4. 设置字两边被横线分割

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
.onpure_title{
        line-height: p2m(100px);
        /*伪元素实现*/

        .margin-l{
           margin-left: p2m(38px);
        }
        .margin-r{
          margin-right: p2m(38px);
        }

        .onpure-icon{
            display: inline-block;
            height: p2m(14px);
            width: p2m(14px);
            background: url('/public/img/fendd@2x.png')  center;
            background-size: contain;

        }



        &:before{
          display: inline-block;
          position: relative;
          top:p2m(-8px);
          right: p2m(20px);
          content: "";
          width: p2m(150px);
          height: 0px;
          border: p2m(2px) solid #fff;

        }

        &:after{
          display: inline-block;
          position: relative;
          top:p2m(-8px);
          left: p2m(20px);
          content: "";
          width: p2m(150px);
          color: #fff;
          height: 0px;
          border: p2m(2px) solid #fff;

        }
      }
      
    效果：  exp  ———— aaa ————————

5设置 文字内阴影

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.fri-tit{
  font-size:p2m(30px);
  color: #FF5655;
  height: p2m(60px);
  line-height: p2m(60px);
  text-align: center;
  span{
    -moz-box-shadow:0em p2m(-20px) p2m(3px)  #FFE5E5 inset ;
    -webkit-box-shadow:0em p2m(-20px) p2m(3px)  #FFE5E5 inset;
     box-shadow:0em p2m(-20px) p2m(3px)  #FFE5E5 inset;
  }
  
  
   <p class="fri-tit"><span>活动说明</span></p>

5设置 p显示几行并且超出省略

1
2
3
4
5
6
7
8
9
10
11
12
p{
   font-size:p2m(30px);
   height: p2m(117px);
   overflow : hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-line-clamp:3;
   -webkit-box-orient: vertical;
 };
  
  
   <p class="fri-tit">活活动说明活动说明活动说明活动说明动说明</p>