线性渐变不仅仅是CSS背景？

Question

可以为/* The ribbons */ .corner-ribbon{ width: 200px; background: #e43; position: absolute; top: 25px; left: -50px; text-align: center; line-height: 50px; letter-spacing: 1px; color: #f0f0f0; transform: rotate(-45deg); -webkit-transform: rotate(-45deg); } /* Custom styles */ .corner-ribbon.sticky{ position: fixed; } .corner-ribbon.shadow{ box-shadow: 0 0 3px rgba(0,0,0,.3); } .corner-ribbon.bottom-left{ top: auto; bottom: 25px; left: -50px; transform: rotate(45deg); -webkit-transform: rotate(45deg); } /* Colors */ .corner-ribbon.white{background: #f0f0f0; color: #555;} .corner-ribbon.black{background: #333;} .corner-ribbon.grey{background: #999;} .corner-ribbon.blue{background: #39d;} .corner-ribbon.green{background: #2c7;} .corner-ribbon.turquoise{background: #1b9;} .corner-ribbon.purple{background: #95b;} .corner-ribbon.red{background: #e43;} .corner-ribbon.orange{background: #e82;} .corner-ribbon.yellow{background: #ec0;} 或linear-gradient CSS属性指定background。是否也可以对整个对象进行此操作，包括边框，轮廓等？或者做同样的过滤器？

Answer 1

这是For border gradient ..

.ps-top-to-bottom {
  position: relative;
  border-top: 3px solid black;
}
.ps-top-to-bottom:before, .ps-top-to-bottom:after {
  content: "";
  position: absolute;
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#000), to(transparent));
  background-image: -webkit-linear-gradient(#000, transparent);
  background-image: -moz-linear-gradient(#000, transparent);
  background-image: -o-linear-gradient(#000, transparent);
  background-image: linear-gradient(#000, transparent);
  top: -3px;
  bottom: -3px;
  width: 3px;
}
.ps-top-to-bottom:before {
  left: -3px;
}
.ps-top-to-bottom:after {
  right: -3px;
}

<!-- THIS IS FOR BORDER-->
<div class="ps-top-to-bottom">
  <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
 </div>

Answer 2

#grad {
    background: red; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(red, yellow); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(red, yellow); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(red, yellow); /* For Firefox 3.6 to 15 */
    background: linear-gradient(red, yellow); /* Standard syntax */
}

<div id="grad">hola mundo</div>

结果是：