Javascript 边框半径(如果边框上有图像)

Javascript 边框半径(如果边框上有图像),javascript,html,reactjs,css,Javascript,Html,Reactjs,Css,使用React和Bootstrap构建一个简单的网站。我想为我的卡片设置一个自定义边界半径,但是当在卡片的上部设置时,它不会被渲染,因为它里面的图像(也是白色的)与容器本身重叠。 是否有css属性可以“平滑”img边界?你将如何解决这个问题 组成部分: import React, { Component } from 'react'; import './App.css'; import logo from '../images/logo.png'; import tile1 from '../

使用React和Bootstrap构建一个简单的网站。我想为我的卡片设置一个自定义边界半径,但是当在卡片的上部设置时,它不会被渲染,因为它里面的图像(也是白色的)与容器本身重叠。 是否有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;
}