javascript - 如果边界上有图像，则为 border-radius

Question

使用 Reactstrap 和 Bootstrap 构建一个简单的 React 网站。我想为我的卡片设置自定义边框半径，但是当将其设置在卡片的上部时，它不会呈现，因为它内部的图像(也是白色)与容器本身重叠。 是否有一个 css 属性可以“平滑”img 边框？你会如何解决这个问题？

组件:

import React, { Component } from 'react';
import './App.css';
import logo from '../images/logo.png';
import tile1 from '../images/tile_imgs/prova(m).png';
import tile2 from '../images/tile_imgs/prova(d).png';
import tile3 from '../images/tile_imgs/prova(x).png';
import { Card, CardImg, CardText, CardBody,
   CardTitle, CardSubtitle, Button, Col, Row, Container } from 'reactstrap';
import PropTypes from 'prop-types';

class App extends Component {

  render() {
    return (
     <div> 
        <div className="App">
            <br/>
            <img src={logo} />
          </div>
            <br/>
            <br/>
            <br/>
            <Container className="prova" fluid="true">
              <Row>
                <Col className="frame" xs="12" sm="4">
                  <Card className="card">
                  <CardImg className="cards" src={tile1} />
                    <CardBody>
                      <CardTitle> Recruitment Services</CardTitle>
                      <CardText>Some quick example text to build on the card title and make up the bulk of the card's content.</CardText>
                      <Button>Discover More!</Button>
                    </CardBody>
                  </Card>
                </Col>
                <Col xs="12" sm="4">
                  <Card>
                  <CardImg className="cards" src={tile2} alt="Card image cap" />
                    <CardBody>
                      <CardTitle>Web Design and Web-mastering</CardTitle>
                      <CardText>Some quick example text to build on the card title and make up the bulk of the card's content.</CardText>
                      <Button>Discover More!</Button>
                    </CardBody>
                  </Card>
                </Col>
                <Col xs="6" sm="4">
                  <Card>
                  <CardImg className="cards" src={tile3} alt="Card image cap" />
                    <CardBody>
                      <CardTitle>Digital Marketing</CardTitle>
                      <CardText>Some quick example text to build on the card title and make up the bulk of the card's content.</CardText>
                      <Button>Discover More!</Button>
                    </CardBody>
                  </Card>
                </Col>
              </Row>
              </Container>
              <br/>
              <br/>
     </div>

    );
  }

}


export default App;

CSS

.App {
  text-align: center;
  background-image:
   url('../images/arch1.jpg'), /*put the first one on the Top*/
   url('../images/computer.jpg'),
   url('../images/arch2.jpg');
  animation: animatedBird 30s infinite;
  height: 26rem;
}

@keyframes animatedBird {
  0% {
    background-image: url('../images/arch1.jpg');
  }
  10% {
    background-image: url('../images/arch1.jpg');
  }
  25% {
    background-image: url('../images/computer.jpg');
  }
  35% {
    background-image: url('../images/computer.jpg');
  }
  50% {
    background-image: url('../images/arch2.jpg');
  }
  60% {
    background-image: url('../images/arch2.jpg');
  }
  75% {
    background-image: url('../images/computer.jpg');
  }
  100% {
    background-image: url('../images/arch1.jpg');
  }
}

.App-header {
  background-color: #222;
  height: 150px;
  padding: 20px;
  color: white;
}

.App-title {
  font-size: 1.5em;
}

#navbar {
  height: 150px;
}

.cards {
  max-height: 200px;
  width: auto;
  height: auto;
}

.prova {
  max-width: 80%;
}

.card {
  width: 24rem;
  height: 26rem;
  text-align: center;
  border-radius: 34px !important;
}

.frame {
  border-radius: 34% !important;
}

Answer 1

尝试在容器的 CSS 上使用 overflow: hide