border-radius样式属性不圆角reactjs中的边

Question

我希望对div c-thumbnail_container的边缘进行圆角处理，但它根本不起作用。有办法做到这一点吗？

const Thumbnail = () => {
const [isShown, setIsShown] = useState((false));
return (
<>
<div className='c-thumbnail__container' onMouseEnter={() => setIsShown(true)} onMouseLeave={() => setIsShown(false)}>
<img src={example} alt="Thumbnail" />
<Bookmark onClick={onClickBook}/>
{isShown && (
<BtnPlay />
)}
</div>
</>
)
}

.c-thumbnail__container{
display: inline-flex;
align-items: center;
justify-content: center;
position: relative;

min-width: 164px;
min-height: 110px;
}
.c-thumbnail__container:hover{
cursor: pointer;
filter: brightness(.7);
}

Answer 1

要添加边界半径，必须将border-radius属性添加到元素CSS中。你好像忘了那样做。

这个CSS将解决你的问题：

.c-thumbnail__container{
display: inline-flex;
align-items: center;
justify-content: center;
position: relative;

min-width: 164px;
min-height: 110px;
// added:
border-radius: 10px;
}
.c-thumbnail__container:hover{
cursor: pointer;
filter: brightness(.7);
}

有关border-radius的详细信息，请访问https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius