乙個div實現同心圓方式

2021-09-27 04:16:05 字數 847 閱讀 9122

二. 非常規方法

1.1 box-shadow可以無限套

具體參考位址

box-shadow: 0 0 0 10px red, 0 0 0 20px black, 0 0 0 30px red, 0 0 0 40px black,0 0 0 50px red;
1.2 重複徑向漸變屬性
background: repeating-radial-gradient(circle, rgb(255, 255, 255) 5%, rgb(0, 0, 0) 10%);
1.3 ::偽元素法+border

同理,偽元素也是乙個元素,所以偽元素也可以當成乙個div來使用同樣的方法,給他加box-shadow再實現同心圓效果

#d3#d3::before 

當然總會存在一些歪理邪說(效果是實現了,但好像違背了css的本意)

2.1 通過強大的background屬性

你可以找到乙個,本身就是乙個同心圓,甚至可以自己做乙個無限個同心圓的作為背景,給他居中一下,效果也實現了,並且保證了只用乙個div和css不變(透,真實狗扯)

具體配置可以看後續background的文章,應為background也是css中重要乙個屬性,它有很多自己的子屬性。

2.3 既然有text-shadow

text-shadow也存在可以無限套的規則,那麼可否找到乙個字型「.」來實現呢,只要你夠居中就行了,貌似是可以的,理論上應該是可以的

2.4 未知…

9個同心圓(Python turtle)

這個程式用來繪製9個同心圓,程式很簡單。運用到的庫 turtle python version 3.7 說到turtle是乙個很實用的庫,實用python來畫圖,這個庫就是乙個好幫手了。import turtle turtle.setup 400,400,300,300 turtle.pensize...

2019 11 16 做人和做企業是乙個同心圓

10 00 過去,全球化是大企業為主導,未來全球化是好企業主導,只有產品好 服務好 體驗好 為他人好的企業才能走得更好。馬雲 把外在問題轉化為自己內在的問題後,會讓自己主動起來。如果一切問題都是自己的問題,我們在解決問題的過程就是乙個自我專注的過程,因為我們都全心全意地解決自己的問題。領導的問題就是...

實現同心圓遮罩漸變顯示 隱藏特效

今天在做 過程中,發現了一種新的特效,在這裡記錄分享一下。給圖示加上遮罩,滑鼠浮動到圖示所在圓時藍色遮罩從圓心逐漸顯現,移出滑鼠時遮罩從圓周逐漸收縮到圓心消失。實現原理 css3中,transform scale x,y 可以實現2d 縮放轉換,而當x y時,它們的橫縱方向縮放比例一致。當x y 0...