0
A
回答
3
您可以使用邊界半徑爲。
檢查這個例子:
.container {
background: black;
width: 490px;
height: 490px;
position: relative;
background: black url(http://www.planwallpaper.com/static/images/recycled_texture_background_by_sandeep_m-d6aeau9_PZ9chud.jpg) no-repeat -500px -500px;
}
.r1 {
width: 400px;
height: 400px;
border-radius: 400px;
border: 30px solid red;
position: absolute;
top: 10px;
left: 10px;
}
.r2 {
width: 300px;
height: 300px;
border-radius: 300px;
border: 30px solid red;
position: absolute;
top: 60px;
left: 60px;
}
.r3 {
width: 200px;
height: 200px;
border-radius: 200px;
border: 30px solid red;
position: absolute;
top: 110px;
left: 110px;
}
<div class="container">
<div class="r1"></div>
<div class="r2"></div>
<div class="r3"></div>
</div>
2
你可以看看徑向漸變:
html {
min-height: 100%;
background-image: radial-gradient(
circle /* a circle*/
closest-side at 50% 50% /* set as closed as possible to center*/,
transparent 0 /* from center */,
/* to */transparent 50px,
/* from */red 50px,
/* to */red 60px,
/*from */transparent 60px,
/* to */transparent 70px,
/* from */red 70px,
/* to */red 80px,
/* from */transparent 80px,
/* to */ transparent 100px,
/* from */ red 100px,
/* to */ red 120px,
/* from */ transparent 120px
/* and so or till end */),
/* bg image to show transparency */ url(http://lorempixel.com/150/150);
}
不斷重複多達所需要的模式。您還可以使用calc()
example來混合百分比和像素值。
1
您可以使用SVG爲好。
body {
height: 100vh;
margin: 0;
display: flex;
}
svg {
flex: 1;
background: url(http://fillmurray.com/638/220) no-repeat center center/cover;
}
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<circle cx="50%" cy="50%" r="40" stroke="#F44336" stroke-width="8" fill="none" />
<circle cx="50%" cy="50%" r="60" stroke="#F44336" stroke-width="6" fill="none" />
<circle cx="50%" cy="50%" r="80" stroke="#F44336" stroke-width="10" fill="none" />
</svg>
相關問題
- 1. 跨瀏覽器兼容性
- 2. 跨瀏覽器兼容
- 3. css調試,跨瀏覽器兼容性
- 4. 小跨瀏覽器兼容CSS問題
- 5. css3形狀兼容性
- 6. Slick2d形狀包含另一個形狀
- 7. 當形狀部分透明時,如何在Canvas中從另一個形狀(XOR)切出一個形狀?
- 8. 跨瀏覽器兼容回車
- 9. 用CSS動態切多邊形 - 跨瀏覽器
- 10. CSS瀏覽器兼容性
- 11. IE跨瀏覽器兼容性問題
- 12. Keras/TF錯誤:不兼容的形狀
- 13. 跨瀏覽器兼容網頁
- 14. 跨瀏覽器兼容滾動表
- 15. 通過svg將兩種形狀合併爲一種形狀
- 16. z-index跨瀏覽器不兼容性
- 17. dojo跨瀏覽器兼容性
- 18. jQuery.data()和跨瀏覽器的兼容性?
- 19. setAttribute,onClick和跨瀏覽器兼容性
- 20. 張量流不兼容形狀
- 21. 不兼容形狀與Tensorflow佔位符
- 22. 交叉驗證不兼容形狀
- 23. 是document.referrer跨瀏覽器兼容嗎?
- 24. 在Chrome瀏覽器中CSS梯形形狀可點擊區域問題
- 25. 使用android.graphics.Path從另一個形狀中刪除一個形狀
- 26. IE瀏覽器顯示圖片地圖切出形狀時點擊
- 27. CSS中的透鏡形狀
- 28. Dash JS Player跨瀏覽器兼容性
- 29. 跨瀏覽器兼容性測試
- 30. 在各種javascript元素上的跨瀏覽器兼容性
你能發佈一些代碼? –
看看徑向漸變也許吧? –