如何使这个梯度垂直 [英] how to make this gradient vertical

问题描述

我有一个横向渐变栏：示例

HTML：

pre> < div class =seperator-gradient>< / div>


CSS：

  .seperator-gradient {
 width：100％; 
 height：10px; 
 border-bottom：background：＃c4c4c4; 
 background：-moz-linear-gradient（left，#ffffff 0％，＃e3e3e3 10％，＃b8b8b8 50％，＃e3e3e3 90％，#fcfcfc 100％）; 
 background：-webkit-gradient（linear，left top，right top，color-stop（0％，＃ffffff），color-stop（10％，＃e3e3e3），color-stop（50％，＃b8b8b8 ），色停（90％，＃e3e3e3），停止（100％，＃fcfcfc））; 
 background：-webkit-linear-gradient（left，#ffffff 0％，＃e3e3e3 10％，＃b8b8b8 50％，＃e3e3e3 90％，＃fcfcfc 100％）; 
 background：-o-linear-gradient（left，#ffffff 0％，＃e3e3e3 10％，＃b8b8b8 50％，＃e3e3e3 90％，＃fcfcfc 100％）; 
 background：-ms-linear-gradient（left，#ffffff 0％，＃e3e3e3 10％，＃b8b8b8 50％，＃e3e3e3 90％，＃fcfcfc 100％）; 
 background：linear-gradient（to right，#ffffff 0％，＃e3e3e3 10％，＃b8b8b8 50％，＃e3e3e3 90％，＃fcfcfc 100％）; 
 filter：progid：DXImageTransform.Microsoft.gradient（startColorstr ='＃ffffff'，endColorstr ='＃fcfcfc'，GradientType = 1）; 
 
 
} 
  

解决方案

尝试此操作：

  .seperator-gradient {
 width：100％; 
 height：10px; 
 border-bottom：background：＃c4c4c4; 
 background：-moz-linear-gradient（left，#ffffff 0％，＃e3e3e3 10％，＃b8b8b8 50％，＃e3e3e3 90％，#fcfcfc 100％）; 
 background：-webkit-gradient（linear，left top，right top，color-stop（0％，＃ffffff），color-stop（10％，＃e3e3e3），color-stop（50％，＃b8b8b8 ），色停（90％，＃e3e3e3），停止（100％，＃fcfcfc））; 
 background：-webkit-linear-gradient（left，#ffffff 0％，＃e3e3e3 10％，＃b8b8b8 50％，＃e3e3e3 90％，＃fcfcfc 100％）; 
 background：-o-linear-gradient（left，#ffffff 0％，＃e3e3e3 10％，＃b8b8b8 50％，＃e3e3e3 90％，＃fcfcfc 100％）; 
 background：-ms-linear-gradient（left，#ffffff 0％，＃e3e3e3 10％，＃b8b8b8 50％，＃e3e3e3 90％，＃fcfcfc 100％）; 
 background：linear-gradient（to right，#ffffff 0％，＃e3e3e3 10％，＃b8b8b8 50％，＃e3e3e3 90％，＃fcfcfc 100％）; 
 filter：progid：DXImageTransform.Microsoft.gradient（startColorstr ='＃ffffff'，endColorstr ='＃fcfcfc'，GradientType = 1）; 
 transform：rotate（90deg）; 
 -ms-transform：rotate（90deg）; 
 -webkit-transform：rotate（90deg）; 
 
} 
  

这将旋转你有90度。我的旁边是积极的，这是正确的方向，但如果这是相反的方式，改变（90deg）到（270deg）。

I have a horizontal gradient bar: example

I am wondering, how to make it vertical instead of horizontal, with about 20px height.

HTML:

<div class="seperator-gradient"></div>

CSS:

.seperator-gradient {
    width: 100%;
    height: 10px;
    border-bottom: background: #c4c4c4;
    background: -moz-linear-gradient(left, #ffffff 0%, #e3e3e3 10%, #b8b8b8 50%, #e3e3e3 90%, #fcfcfc 100%);
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,#ffffff), color-stop(10%,#e3e3e3), color-stop(50%,#b8b8b8), color-stop(90%,#e3e3e3), color-stop(100%,#fcfcfc));
    background: -webkit-linear-gradient(left, #ffffff 0%,#e3e3e3 10%,#b8b8b8 50%,#e3e3e3 90%,#fcfcfc 100%);
    background: -o-linear-gradient(left, #ffffff 0%,#e3e3e3 10%,#b8b8b8 50%,#e3e3e3 90%,#fcfcfc 100%);
    background: -ms-linear-gradient(left, #ffffff 0%,#e3e3e3 10%,#b8b8b8 50%,#e3e3e3 90%,#fcfcfc 100%);
    background: linear-gradient(to right, #ffffff 0%,#e3e3e3 10%,#b8b8b8 50%,#e3e3e3 90%,#fcfcfc 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#fcfcfc',GradientType=1 ); 


}

解决方案

Try this:

.seperator-gradient {
    width: 100%;
    height: 10px;
    border-bottom: background: #c4c4c4;
    background: -moz-linear-gradient(left, #ffffff 0%, #e3e3e3 10%, #b8b8b8 50%, #e3e3e3 90%, #fcfcfc 100%);
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,#ffffff), color-stop(10%,#e3e3e3), color-stop(50%,#b8b8b8), color-stop(90%,#e3e3e3), color-stop(100%,#fcfcfc));
    background: -webkit-linear-gradient(left, #ffffff 0%,#e3e3e3 10%,#b8b8b8 50%,#e3e3e3 90%,#fcfcfc 100%);
    background: -o-linear-gradient(left, #ffffff 0%,#e3e3e3 10%,#b8b8b8 50%,#e3e3e3 90%,#fcfcfc 100%);
    background: -ms-linear-gradient(left, #ffffff 0%,#e3e3e3 10%,#b8b8b8 50%,#e3e3e3 90%,#fcfcfc 100%);
    background: linear-gradient(to right, #ffffff 0%,#e3e3e3 10%,#b8b8b8 50%,#e3e3e3 90%,#fcfcfc 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#fcfcfc',GradientType=1 ); 
    transform: rotate(90deg);
    -ms-transform: rotate(90deg); 
    -webkit-transform: rotate(90deg);

}

This will rotate what you have 90 degrees. I'm next to positive it's in the right direction, but if this goes the opposite way, change (90deg) to (270deg).

这篇关于如何使这个梯度垂直的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！