CSS

Question

我正在使用react，并且有一个要在屏幕上映射的圆形组件。问题是在某些视图尺寸下，我在圆圈中出现了小瑕疵。平端，仅在圆的某些行上。

Circles have flat sides at view width 980px

ball hitbox

container hitbox

.ballholder{
    display:flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    background-color:rgb(206,35,212);
    padding:0.5vw;
    border-radius: 5%;
    border:2px solid black;
}
.aball{
  background-image: linear-gradient(to bottom right, white, whitesmoke, rgb(150,150,150));
    color:black;
    border-radius:50%;
    display:flex;
    justify-content:center;
    align-items:center;
    width:2vw;
    height:2vw;
    padding:0.05vw;
    margin:0.20vw;
    font-size:1.3vw;
}

这是父组件：

import React, { Component } from "react";
import { Switch, Route, Redirect, Link } from "react-router-dom";
import Ball from "./Ball";
import "../App.css";

export default class Ballswitch90 extends Component {
  constructor(props) {
    super(props);
      this.state = {

    };
  }

  render() {
    const balls = this.state.balls.map((a, i) =>
      a ? (
        <Ball p={{ num: i + 1, clicked: false }} />
      ) : (
        <Ball p={{ num: i + 1, clicked: true }} />
      )
    );
    return <div className="ballholder">{balls}</div>;
  }
}

球组件：

import React, { Component } from 'react';
import { Switch, Route, Redirect, Link } from "react-router-dom"
import '../App.css'

export default class Ball extends Component {
    constructor(props) {
        super(props)
        this.state = {
            num:props.p.num,
            clicked:props.p.clicked
        }
    }

    render() {
        return (
            <div>
                {this.state.clicked
                ?
                <div className="aball">{this.state.num}</div>
                :
                <div className="aballred">{this.state.num}</div>
            }
            </div>
        )
    }
}

我尝试添加填充和边距，但这仅改变了单位显示的尺寸。

Answer 1

高度和宽度的css规则可能会引起一些问题。

您可以看到效果很好的这段代码：

https://codesandbox.io/embed/n6jrm1k2l

aball {
  border-radius: 50%;
  background-color: white;
  border: 1px solid darkred;
  padding: 1em;

  /* Center the text contents */
  display: inline-flex;
  align-items: center;
  justify-content: center;

  color: black;
}

.aball:after {
  content: "";
  display: block;

  /* Ensure the element is a square */
  height: 0;
  width: 100%;
  padding-bottom: 100%;
}

.aball__value {
  /* Set the height to 0 and overflow to visible to not interfere with the square styles */
  overflow: visible;
  height: 0;

  /* Vertically center text since we set its height to 0 */
  margin-top: -1em;
}