css效果（两边渐渐消失的线、边框上下渐变）

两边渐渐消失的线

html如下：
<div class="title titleLeft"></div><div class="line"></div>
<p class="text">这是一段内容</p>
<div class="line"></div><div class="title titleRight"></div>
css如下：
.title{
         width: 96px;
         height: 1px;
         background: #ff72a3;
         float: left;
         margin-top: 14px;
     }
     .titleLeft{
         background:linear-gradient(to right,#efefef,#ff72a3);
     }
     .titleRight{
         background:linear-gradient(to left,#efefef,#ff72a3);
     }
     .line{
         float: left;
         height: 30px;
         width: 4px;
         background: #ff72a3;
     }
     .text{
         float: left;
         margin: 5px 18px;
     }

效果如下：

边框上下渐变

html如下：
<div class="border">内容 </div>
css如下：
.border{
         position: relative;
         border: 1px solid transparent;
         border-radius: 14px;
         padding: 10px;
         background: #fff;
         display: block;
         width: 50px;
         height: 50px;
         margin: 50px;
         text-align: center;
         line-height: 50px;
     }
     .border::after{
         position: absolute;
         top: -4px;
         bottom: -4px;
         left: -4px;
         right: -4px;
         background: linear-gradient(#ffbfb6, #fd74a2);
         content: '';
         z-index: -1;
         border-radius: 16px;
      }

效果图如下：