如何在 CSS 中創建具有自定義大小和 position 的圓形徑向漸變

Question

我目前正在嘗試使用 HTML CSS 和 JS 重新創建一個石頭剪刀布游戲，除了按鈕的設計。 我不知道如何創建像下面這樣的徑向漸變。 任何幫助表示贊賞

Answer 1

這可以通過結合使用border 、 box-shadow和inset box-shadow

我在下面添加了一個小片段來說明我的解決方案

 html { background-color: #999; } body { margin: 0; padding:.5rem; }.choices { display: flex; flex-direction: row; gap: 2rem; }.wrapper { background-color: #e3e3e5; width: 50px; height: 50px; display: flex; justify-content: center; align-items: center; border-radius: 50%; border: 0.5rem solid #dc3550; box-shadow: inset 0 0.125rem 0 1px rgb(64 64 64 / 25%), 0 0.25rem 0 0px rgb(162 21 47); cursor: pointer; user-select: none; transition: box-shadow.125s, margin.125s; }.wrapper:hover { background-color: #efd6c0; }.wrapper:active { margin-top:.25rem; box-shadow: inset 0 0.125rem 0 1px rgb(64 64 64 / 25%); }

 <div class="choices"> <div class="wrapper"> <,-- could be an svg for your fist, scissor or paper or even an img with a fixed width and height --> F </div> <div class="wrapper"> <,-- could be an svg for your fist scissor or paper or even an img with a fixed width and height --> S </div> <div class="wrapper"> < -- could be an svg for your fist scissor or paper or even an img with a fixed width and height --> P </div> </div>