Step1
首先,先畫出一個區塊,再選擇 「SVG濾鏡 / 套用SVG濾鏡」 選項。
Step2
開啟「套用SVG濾鏡面板」後,再點下方的「新增SVG濾鏡」圖示。
Step3
這時就會開啟「編輯SVG濾鏡」面板。
Step4
接著再把下方的碼,貼入輸入框中後,再按「確定」。
<filter id="InnerShadow-5-5-0.75-black"> <!– Shadow Offset –> <feOffset dx="5" dy="5"></feOffset> <!– Shadow Blur –> <feGaussianBlur result="offset-blur" stdDeviation="3"></feGaussianBlur> <!– Invert the drop shadow to create an inner shadow –> <feComposite in="SourceGraphic" in2="offset-blur" operator="out" result="inverse"></feComposite> <!– Color & Opacity –> <feFlood flood-color="black" flood-opacity="0.75" result="color"></feFlood> <!– Clip color inside shadow –> <feComposite in="color" in2="inverse" operator="in" result="shadow"></feComposite> <!– Put shadow over original object –> <feComposite in="shadow" in2="SourceGraphic" operator="over"></feComposite> </filter>
語法說明:
feOffset:陰影xy的位置
feFlood:陰影顏色與透明度
flood-color:顏色
flood-opacity:透明度
feGaussianBlur:陰影模糊強弱
stdDeviation:羽化強弱
feFlood:陰影顏色與透明度
flood-color:顏色
flood-opacity:透明度
feGaussianBlur:陰影模糊強弱
stdDeviation:羽化強弱
Step5
當要套用剛所設定好的陰影效果時,只需到 「SVG濾鏡」選項中,點選剛所自訂的濾鏡特效。
Step6
鏘~鏘~這時區塊立即就會產生內陰影的效果,真的超方便的啦!