-webkit-radial-gradient、background-image阴影遮罩等新特效

1、第一种方式：条纹制作

HTML代码为：

<h5>条纹进度条</h5>
     <div class="progress progress-striped">
          <div class="progress-bar progress-bar-info" aria-valuenow="40" aria-valuemax="100" aria-valuemin="0" style="width:40%;"></div>
     </div>
     <h5>动画进度条</h5>
     <div class="progress progress-striped active">
          <div class="progress-bar progress-bar-warning" aria-valuemin="0" aria-valuemax="100" aria-valuenow="40" style="width:40%"></div>
     </div>

CSS代码为：

.progress {height: 20px;margin-bottom: 20px;overflow: hidden;background-color: #f5f5f5;border-radius: 4px;-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1);box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1);}
.progress-bar {float: left;width: 0;height: 100%;font-size: 12px;line-height: 20px;color: #fff;text-align: center;background-color: #337ab7;-webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15);box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15);-webkit-transition: width .6s ease;-o-transition: width .6s ease;transition: width .6s ease;}
.progress-striped .progress-bar {
  background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
  background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
  background-image: linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);-webkit-background-size: 40px 40px;background-size: 40px 40px;}
.progress.active .progress-bar {
  -webkit-animation: progress-bar-stripes 2s linear infinite;
       -o-animation: progress-bar-stripes 2s linear infinite;
          animation: progress-bar-stripes 2s linear infinite;}
.progress-bar-success {background-color: #5cb85c;}
.progress-bar-info {background-color: #5bc0de;}
.progress-bar-warning {background-color: #f0ad4e;}

 

第二种方式：background-image阴影遮罩

 、

 

<div class="unfold-field">
     <div class="unflod-field__mask"></div>
     <a href="javascript:void(0)" class="unfold-field__text">展开全文</a>
</div>

CSS代码：

.unfold-field{ text-align: center; position: relative; padding: 10px 0;}
.unfold-field a{ display: block; cursor: pointer; font-size: 14px; color: #406599; text-align: center;}
.unfold-field .unflod-field__mask {position: absolute;top: -78px;height: 78px;width: 100%;background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,hsla(0,0%,100%,0)),to(#fff));background-image: linear-gradient(-180deg,hsla(0,0%,100%,0),#fff);}
.unfold-field a:after{content: ''; width: 10px; height: 10px; border:2px solid #406599; border-width:2px 0 0 2px; display: inline-block; margin-left: 5px; -webkit-transform:rotate(-135deg);transform:rotate(-135deg); vertical-align: text-top;transition:all 0.2s linear 0s;}
.unfold-field a.active:after{-webkit-transform:rotate(45deg);transform:rotate()45deg;vertical-align: text-bottom;}

原文参照：https://m.toutiao.com/i6435851581475783169/?tt_from=mobile_qq&utm_campaign=client_share&app=news_article&utm_source=mobile_qq&iid=11498051041&utm_medium=toutiao_android

 第三种方式：椭圆

HTML代码为：

<div class="user-header-box user_headerBox">
     <div class="userPadding">
          <a href="/mobile/user/profile/index.html">
             <div class="user-header">
                  <div class="heaer-img"><img src="/data/images_user/5a34dfb166b62.jpg"></div>
             </div>
          </a>
          <a href="/mobile/user/profile/index.html" class="box-flex">
             <div class="header-admin">
                  <h4 class="ellipsis-one f-06">autodrp</h4>
             </div>
          </a>
     </div>
</div>

CSS代码为：

.user_headerBox {
    background: -webkit-gradient(linear,left top,left bottom,from(#86f0ea),to(#0fdfb5));
    background: -webkit-linear-gradient(top,#86f0ea,#0fdfb5);
    background: linear-gradient(top,#86f0ea,#0fdfb5);
    border-radius: 0 0 100% 100%;
    width: 140%;
    position: relative;
    left: -20%;
    top: 0;
}

 

 

 

http://www.cnblogs.com/lhb25/archive/2013/02/24/css3-radial-gradient.html