Ich möchte eine Karte in ReactJs erstellen, aber keine Grenzfarbe von Karten stylen können ⇐ HTML

[Anonymous]

Ich möchte Karten in ReactJs machen. Wenn ich sie style, funktioniert die Grenzfarbe nicht. Eigentlich möchte ich eine Karte wie diese erstellen-
erwarte, diese Art von Karten zu erstellen. /> Der Abschnitt über die übergeordnete Komponentenkartenbehälter-> < /strong> < /p>

Code: Select all

<
>

Karten Cotainer CSS-> [/b]

Code: Select all

.Cardsection{
position: relative;
display: flex;
align-items: center;
justify-content: center;
height: 50vh;
margin-top: 40rem;
overflow: hidden;
}

.cards-container{
display: flex;
align-items: center;
overflow-x: hidden;
overflow-y: hidden;
scroll-behavior: smooth;
margin-left: 60px;
margin-right: 60px;
}

.left-btn, .right-btn{
width: 60px;
position: absolute;
border: none;
background-color: rgba(255, 255, 255, 0);
}

.left-btn{
right: 0;
}

.right-btn{
left: 0;
}

.left-btn>h1, .right-btn>h1{
font-size: 50px;
font-weight: bold;
background-color: rgba(0, 0, 0, 0.436);
border-radius: 50px;
color: white;
width: 50px;
height: 100px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}

Child-Komponentencode->

Code: Select all

[img]{props.Projectimg} alt=[/img]
{props.name}

Karten Styling->
.cards-shown{
min-width: 250px;
height: 300px;
margin-right: 70px;
background-color: black;
border-color:red;
border-width: 10px;
gap: 20px;
}

.cards-shown>:nth-child(1){
justify-content: center;
align-items: center;
transform: scale(1);
width: 70%;
}

.cards-shown>:nth-child(2){
color: white;
font-family: 'Lucida Sans';
font-size: 20px;
top: 0%;
padding: 0%;
}
< /code>
Ich habe versucht, die Grenzfarbe zu stylen, aber es funktioniert nicht. Ich erwarte, Karten zu erstellen, und dieser Kartenhintergrund ist transparent und nur die Grenze ist sichtbar, damit sie wie Karten und alle Inhalte aussieht, die ich als Requisiten schreiben oder hinzufügen möchte.