亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

使用CSS 3的SVG丟棄陰影

使用CSS 3的SVG丟棄陰影

元芳怎么了 2019-08-03 07:03:04
使用CSS 3的SVG丟棄陰影是否可以使用CSS 3為SVG元素設置拖放陰影,例如box-shadow: -5px -5px 5px #888;-webkit-box-shadow: -5px -5px 5px #888;我看到了一些關于使用過濾器效果創建陰影的注釋。是否有單獨使用CSS的例子。下面是正確應用緩沖樣式的工作代碼,但沒有陰影效果。請幫助我得到陰影效果,至少一點代碼。svg .shadow {   cursor:crosshair;   -moz-box-shadow: -5px -5px 5px #888;  -webkit-box-shadow: -5px -5px 5px #888;  box-shadow: -5px -5px 5px #888; } <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" baseProfile="full"  viewBox="0 0 120 70">      <rect class="shadow" x="10" y="10" width="100" height="50" fill="#c66" /></svg>
查看完整描述

3 回答

?
收到一只叮咚

TA貢獻1821條經驗 獲得超5個贊

這是一個使用“Filter”屬性將下拉陰影應用于某些SVG。如果要控制陰影的不透明度,請查看這個例子..這個slope屬性控制向下拉陰影提供多少不透明度。

示例中的相關雙邊投資條約:

<filter id="dropshadow" height="130%">
  <feGaussianBlur in="SourceAlpha" stdDeviation="3"/> <!-- stdDeviation is how much to blur -->
  <feOffset dx="2" dy="2" result="offsetblur"/> <!-- how much to offset -->
  <feComponentTransfer>
    <feFuncA type="linear" slope="0.5"/> <!-- slope is the opacity of the shadow -->
  </feComponentTransfer>
  <feMerge> 
    <feMergeNode/> <!-- this contains the offset blurred image -->
    <feMergeNode in="SourceGraphic"/> <!-- this contains the element that the filter is applied to -->
  </feMerge></filter><circle r="10" style="filter:url(#dropshadow)"/>

框-陰影被定義為在CSS框(讀:矩形)上工作,而SVG比矩形更有表現力。閱讀SVG底漆了解更多關于SVG過濾器可以做什么的知識。



查看完整回答
反對 回復 2019-08-05
  • 3 回答
  • 0 關注
  • 686 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號