我們知道如何創建一個工具提示創建一個工具提示（沒有額外的div），是這樣的：是有辦法與內側陰影

div{ 
    width: 200px; 
    height: 200px; 
    background: red; 
    margin: 80px; 
    border-radius: 20px; 
    position: relative; 
    box-shadow: inset 2px 2px 15px black; //this is the problem 
} 
div:before{ 
    content: ' '; 
    display:block; 
    width: 0; 
    border-left: red 30px solid;  
    border-right: transparent 30px solid; 
    border-bottom: transparent 30px solid; 
    border-top: transparent 30px solid; 
    position:absolute; 
    top: 60px; right: -60px; 
}

上面設置的div的內陰影的代碼，但不是sudo元素，這裏是demo。有沒有辦法讓內部陰影在sudo元素的邊界上工作？還是有另一種方法來獲得我需要的效果。

我知道，如果我需要一個陰影，我可以在DIV應用過濾器：

filter: drop-shadow(2px 2px 15px black);

但是，有沒有辦法做到這一點對於內部的陰影？

感謝

來源

2013-03-05 aurel

是這樣的？ http://dabblet.com/gist/5093663 – Ana 2013-03-05 19:56:02

非常感謝@Ana。你可以添加它作爲答案，所以我可以打勾嗎？再次感謝 – aurel 2013-03-05 20:13:52

添加爲答案。 – Ana 2013-03-05 20:33:08

你可以嘗試這樣的事：

live demo

更改CSS的僞元素：

div:before{ 
    content: ''; 
    display:block; 
    width: 60px; height: 60px; 
    transform: rotate(45deg); 
    background: red; 
    position:absolute; 
    top: 60px; right: -25px; 
    box-shadow: inset -10px 10px 15px -15px black; 

}

它並不完美，但它的工作原理產生微妙的影響。

來源

2013-03-05 20:31:25 Ana

你總是可以只使用一個陰影像這樣：

-webkit-過濾：下拉陰影（0 1px的4PX RGBA（0,0,0,9））

或者您可以設置背景圖片

我希望以某種方式幫助：d

來源

2013-03-05 19:59:02 Giovanni

是有辦法與內側陰影

回答

live demo

相關問題