如何在網站上的任何對象上製作圓形突出顯示....圓形突出顯示css3

我一直在環顧四周，找不到任何文檔。儘管我似乎相信現在任何事情都可以用css來實現，但事實告訴我，這隻能用於像canvas這樣的東西，並且需要大量的內存。

唯一的其他文章中，我已經看到了這個是這樣的產品...... (jquery) Blackout the entire screen and highlight a section of the page? 雖然他們沒有解決的問題，圓有

我已經看到了幾個網站如何突出某個元素，但是如何讓高亮顯示的區域變成圓形？通過只添加z-index來在覆蓋圖上方顯示方形元素，似乎不可能使該區域成爲一個圓圈。

也許我可以對包含在圓圈中的每個元素進行z-索引並創建陰影在邊緣附近與覆蓋層相同的顏色（但是如果聚光燈需要運行到背景的一部分上，我需要包括整個背景並且可能變醜）......在某些情況下，這可能實際上起作用，但是聽起來有點怪異，不是嗎？

人有突出一個頁面上的對象但亮點爲圓/就像聚光燈用元素...

來源

2014-01-14 mike

您可以border-radius和box-shadow做到這一點，至少這是我能的唯一途徑想與純 CSS

你要做的就是你做出一個transparent背景圓的元素，然後你給它一個box-shadow是完全黑色的，可以填充整個頁面，並且可以獲得一些令人驚歎的效果。

示例代碼

#torch{ 
    width: 200px; 
    height: 200px; 
    background: transparent; 
    border-radius: 50%; 
    position: fixed; 
    box-shadow: 0px 0px 0px 2000px #000, 0px 0px 50px inset; 
}

不要忘記添加前綴-moz-, -webkit- ..etc，如果你需要它，不要忘記你的z-index。

Demo at JSFiddle

來源

2014-01-14 20:02:54 iConnor

聰明！提醒有關跨瀏覽器前綴的獎勵。 – Dpeif

雅這是極端聰明的......我怎麼沒有想到這一點，大聲笑...即時將嘗試應用這真的很快，然後給你的答案 – mike

哇我剛剛意識到這是多麼令人難以置信的簡單。繼承人是我從它製作的小提琴，有沒有辦法能夠與下面的元素進行交互？非常感謝！ http://jsfiddle.net/MLNAF/2/ – mike

只需使用border-radius讓你想「揭露」了一圈容器很好的解決。

使用鏈接帖子中的jsfiddle示例，我將其修剪得更容易，但實際上，您只需使用鏈接的帖子以及大的邊框半徑值來模仿一個圓圈。

http://jsfiddle.net/98EAt/

來源

2014-01-14 19:44:39 Lee

如果裏面有內容呢？下面是我非常快速地從jfiddle放在一起的一個示例：http://jsfiddle.net/98EAt/1/ 我不需要突出顯示圓形元素，而是突出顯示具有圓形突出顯示的方形元素。感謝與小提琴的工作！ – mike

通過使用border-radius使圓圈和其他的東西，可能是這可以幫助你.. http://jquerytools.org/demos/toolbox/expose/

來源

2014-01-14 19:52:27

2年因爲有人問，

我已經制定了這件事情的一個插件，

Hop Logo

讓我知道你的反饋。

來源

2016-10-25 19:49:01 amd

圓形突出顯示css3

回答

Demo at JSFiddle

相關問題