Question

我在codepen上有我的代码： https://codepen.io/matejcsok/pen/PONJgP?editors=0100

我的任务是创建一个圆圈，并围绕它创建多个边框，但最外面的虚线边框的圆圈在顶部的距离不均匀。我被允许在html代码中只使用一个div。

body{
  width: 500px;
  height:500px;
}
div{
    position: absolute;
    top: 250px;
    left: 250px;
    width: 160px;
    height: 160px;
    border-radius: 50%;
    background-color: red;
    border: 10px solid #fff;
    box-shadow: 0 0 0 5px green;
}
div:after {
    content: '';
    border-radius: 50%;
    position: absolute;
    border: 5px dashed pink;
    top: -40px;
    left: -40px;
    right: -40px;
    bottom: -40px;
    background: white;
    z-index: -1;
}
div:before {
    content: '';
    border-radius: 50%;
    position: absolute;
    border: 7px dotted chocolate;
    top: -60px;
    left: -60px;
    right: -60px;
    bottom: -60px;
    background: white;
    z-index: -1;
}

<head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 </head>
 <body>
 <div></div>
 </body>
</html>

Answer 1

简短回答：你不能。

点之间的距离是固定的。无论您是将import numpy as np import matplotlib.pyplot as plt from scipy.optimize import curve_fit def gauss(x,mu,sigma,A): return A*np.exp(-(x-mu)**2/2/sigma**2) def bimodal(x,mu1,sigma1,A1,mu2,sigma2,A2): return gauss(x,mu1,sigma1,A1)+gauss(x,mu2,sigma2,A2) def rmse(p0): mu1,sigma1,A1,mu2,sigma2,A2 =p0 y_sim = bimodal(x,mu1,sigma1,A1,mu2,sigma2,A2) rms = np.sqrt((y-y_sim)**2/len(y)) data = pd.read_csv('data.csv') x, y = data.index, data['24hr'].values expected=(400,720,500,700,774,150) params,cov=curve_fit(bimodal,x,y,expected, maxfev=100000) sigma=np.sqrt(np.diag(cov)) plt.plot(x,bimodal(x,*params),color='red',lw=3,label='model') plt.plot(x,y,label='data') plt.legend() print(params,'\n',sigma)变为圆形，浏览器都不会优化均匀渲染的距离。

Answer 2

不确定您的确切要求，但从我的角度来看，我会将边框宽度减少到2或3像素，因为虚线/虚线仍然可见，顶部的间距问题变得不那么明显。

如何在CSS中围绕圆圈制作虚线边框？

2 个答案: