Programmiererforum

<
>

.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;
}

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

[url=viewtopic.php?t=14917]Ich möchte[/url] 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. /> [b] Der Abschnitt über die übergeordnete Komponentenkartenbehälter-> < /strong> < /p>
[code]
<
>














[/code]
Karten Cotainer CSS-> [/b]
[code].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]
[b] Child-Komponentencode-> [/b]
[code]
[img]{props.Projectimg} alt=[/img]
{props.name}

[/code]
[b] Karten Styling-> [/b]
.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.