React.js卡片边框样式不生效问题求助

你的卡片边框不显示、背景不符合需求的问题，核心出在CSS设置的两个关键点上，以下是具体修复方案：

问题根源 #

• CSS中border-color和border-width必须配合border-style才能生效，默认border-style为none，导致你设置的红色边框无法显示
• 当前卡片背景色设为black，不符合透明背景的需求

修改后的卡片样式CSS #

.cards-shown{
    min-width: 250px;
    height: 300px;
    margin-right: 70px;
    background-color: transparent; /* 改为透明背景 */
    border-color: red;
    border-width: 10px;
    border-style: solid; /* 添加边框样式，让颜色和宽度生效 */
    gap: 20px;
    display: flex; /* 添加flex布局，让内部元素居中对齐 */
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.cards-shown>:nth-child(1){
    width: 70%;
}

.cards-shown>:nth-child(2){
    color: white;
    font-family: 'Lucida Sans';
    font-size: 20px;
    margin: 0; /* 去除默认margin，优化布局 */
}

子组件优化（适配不同props场景） #

针对存在cardno这类无图片/名称的卡片，添加条件渲染避免空元素：

<div className='cards-shown'>
  {props.Projectimg && <img src={props.Projectimg} alt={props.name || "Project"} />}
  {props.name && <p>{props.name}</p>}
  {props.cardno && <p>Card {props.cardno}</p>}
</div>

额外提示 #

• 可以用border简写属性简化代码：border: 10px solid red;，效果和分开设置一致
• 透明背景也可写为background: rgba(0,0,0,0);，与transparent等效

内容的提问来源于stack exchange，提问作者Random dev.