css li圆角

时间:2023-06-27 16:22:24

html li创建圆角样式,你可以使用 CSS 的 border-radius 属性。你可以将 border-radius 应用于li的边框或背景,以实现圆角效果。

使用 CSS 为 <li> 元素添加圆角样式:

<style>
li {
border-radius: 10px;
/* 或者使用 background-color 添加背景圆角样式 */
/* background-color: #000;
border-radius: 10px; */
}
</style>

<ul>
<li>列表项 1</li>
<li>列表项 2</li>
<li>列表项 3</li>
</ul>

在上面的示例中,我们将 border-radius 属性应用于 <li> 元素,将其边框的四个角都设置为圆角,圆角半径为 10px。

你也可以通过将 border-radius 应用于 <li> 元素的背景颜色,实现背景的圆角效果。你需要设置 <li> 元素的背景颜色,并将 border-radius 属性应用于其背景。

请注意,这些圆角样式会应用于 <li> 元素的每个列表项。如果你只想应用于特定的列表项,可以为这些列表项添加自定义的 CSS 类,并将圆角样式应用于这些特定的类。

 

相关词 圆角 li