我的確想在圖像中使用具有該斜角效果的css設計如下所示的東西

-1

我確實想要應用類似於使用css的圖像中所示的效果。我嘗試過，但無法獲得閃亮或覆蓋弧的東西？我的確想在圖像中使用具有該斜角效果的css設計如下所示的東西

所以好心幫幫忙：

enter image description here

我也曾經試過，但無法應用下面提供的解決方案。

<!Doctype html> 
<html> 
<head> 
    <title>JQ chart</title> 
    <link rel="stylesheet" type="text/css" href="css/jquery.jqGauges.css"> 
    <script type="text/javascript" src="js/jquery-1.11.1.min.js"></script> 
    <script type="text/javascript" src="js/jquery.jqGauges.min.js"></script> 
<script lang="javascript" type="text/javascript"> 

     var values = { v1: 80 }; 

     $(document).ready(function() { 

     var background = { 
       type: 'linearGradient', 
       x0: 1, 
       y0: 1, 
       x1: 1, 
       y1: 0.5, 
       colorStops: [{ offset: 0, color: '#C4C4C4' }, 
          { offset:0.3,color:'black'} 
         ] 
      }; 

      var gradient1 = { 
       type: 'linearGradient', 
       x0: 0, 
       y0: 0.5, 
       x1: 1, 
       y1: 0.5, 
       colorStops: [{ offset: 0, color: '#C5F80B' }, 
          { offset: 1, color: '#6B8901'}] 
      }; 

      var gradient2 = { 
       type: 'linearGradient', 
       x0: 0.5, 
       y0: 0, 

       x1: 0.5, 
       y1: 1, 
       colorStops: [{ offset: 0, color: '#FF3366' }, 
          { offset: 1, color: '#B2183E'}] 
      }; 

      var anchorGradient = { 
       type: 'radialGradient', 
       x0: 0.5, 
       y0: 0.8, 
       r0: 0, 
       x1: 0.5, 
       y1: 0.8, 
       r1: 1, 
       colorStops: [{ offset: 0, color: '#797981' }, 
          { offset: 1, color: '#1C1D22'}, 
          {offset:0.5, color:'#58575C'} 
          ] 
      }; 

      $('#jqRadialGauge').jqRadialGauge({ 
       background: anchorGradient, 
       border: { 
        lineWidth: 3, 
        strokeStyle: '#595959', 
        padding: 16, 
       }, 
       shadows: { 
        enabled: true 
       }, 
       anchor: { 
        visible: true, 
        fillStyle: anchorGradient, 
        radius: 0.10 
       }, 
       tooltips: { 
        disabled: true, 
        highlighting: false 
       }, 
       scales: [ 
         { 
          minimum: 0, 
          maximum: 140, 
          startAngle: 140, 
          endAngle: 400, 
          majorTickMarks: { 
           length: 7, 
           lineWidth: 2, 
           interval: 20, 
           offset: 1, 
           strokeStyle: '#B9BDC0' 
          }, 
          minorTickMarks: { 
           visible: false, 
           length: 8, 
           lineWidth: 2, 
           interval: 2, 
           offset: 0.84, 
           strokeStyle: 'white' 
          }, 
          labels: { 
           visible:false, 
           orientation: 'horizontal', 
           interval: 10, 
           offset: 1.00, 
           strokeStyle:'white' 
          }, 
          needles: [ 
             { 
              value: values.v1, 
              type: 'triangle', 
              outerOffset: 1.5, 
              mediumOffset: 0.7, 
              width: 7, 
              fillStyle: '#C01211' 
             } 
          ]      
         } 
         ] 
      }); 

      updateGauge(); 
     }); 

     function updateGauge() { 

      $(values).animate({ 
       v1: Math.round(Math.random() * 100) 
      }, 
      { 
       duration: 600, 
       step: function() { 
        var scales = $('#jqRadialGauge').jqLinearGauge('option', 'scales'); 

        scales[0].needles[0].value = this.v1; 

        $('#jqRadialGauge').jqLinearGauge('update'); 
       }, 
       complete: function() { 
        setTimeout('updateGauge()', 400); 
       } 
      }); 
     } 

    </script> 

</head> 
<body style="background-color:black;"> 
    <div> 
     <div id="jqRadialGauge" style="width: 150px; height: 150px;"> 
     </div> 
    </div> 
</body> 
</html>

來源

2015-10-08 DEEPAK JAWALKAR

預計你至少嘗試爲自己的代碼這一點。堆棧溢出不是代碼寫入服務。我建議你做一些額外的研究，無論是通過谷歌或通過搜索，做一個嘗試和。如果您仍然遇到麻煩，請返回**您的代碼**並解釋您嘗試過的以及爲什麼它不起作用。 –

@Paulie_D完全是關鍵。我剛剛喝咖啡時間。你永遠不應該期望有一個有咖啡時間。編寫你自己的代碼。顯示你的嘗試。閱讀[問]。比告訴我們你的具體問題。只是向我們投擲一個圖像是...不好。 –

你的意思是這樣......

.shinyCircle{ 
 
    position:relative; 
 
    overflow:hidden; 
 
    background:#9F9F9F; 
 
    width:200px; 
 
    height:200px; 
 
    border-radius:50%; 
 
    border:5px solid #000; 
 
} 
 

 
.shinyCircle:after{ 
 
    position:absolute; 
 
    content:""; 
 
    background: -webkit-linear-gradient(top, #333, #ccc); 
 
    background: -moz-linear-gradient(top, #333, #ccc); 
 
    background: -ms-linear-gradient(top, #333, #ccc); 
 
    background: linear-gradient(top, #333, #ccc); 
 
    width:inherit; 
 
    height:inherit; 
 
    border-radius:inherit; 
 
    top:30%; 
 
}

<div class="shinyCircle"></div>

來源

2015-10-08 08:55:33

我們非Apple用戶呢？ ;-) – Shikkediel

@Shikkediel你，非Apple用戶（bwt -webkit-，Chrome，Windows，請記住？）應該知道如何添加所需的設備特定前綴;） –

是啊......我很懶，使用Firefox並需要一個默認的漸變。不錯的工作。 – Shikkediel

我的確想在圖像中使用具有該斜角效果的css設計如下所示的東西

回答

相關問題