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元素上的跨浏览器兼容性
你能发布一些代码? –
看看径向渐变也许吧? –