Ich möchte eine Karte in ReactJs erstellen, aber keine Grenzfarbe von Karten stylen können
Posted: 05 Apr 2025, 23:22
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>
Karten Cotainer CSS-> [/b]
Child-Komponentencode->
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.
erwarte, diese Art von Karten zu erstellen. /> Der Abschnitt über die übergeordnete Komponentenkartenbehälter-> < /strong> < /p>
Code: Select all
<
>
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;
}
Code: Select all
[img]{props.Projectimg} alt=[/img]
{props.name}
.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.