uni-app学习：CSS之圆角篇

最新推荐文章于 2025-06-12 11:40:51 发布

sziitjin

最新推荐文章于 2025-06-12 11:40:51 发布

阅读量1w

点赞数 1

CC 4.0 BY-SA版权

分类专栏： uni-app css 文章标签： css

本文链接：https://blog.csdn.net/sziitjin/article/details/107359710

uni-app 同时被 2 个专栏收录

18 篇文章

订阅专栏

css

6 篇文章

订阅专栏

本文详细介绍了使用CSS的border-radius属性来实现不同样式的圆角效果，包括指定背景颜色、边框以及背景图片的元素圆角，同时讲解了如何设置四个不同角落的圆角大小。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. 指定背景颜色的元素圆角：
{
    border-radius: 25px;
    background: #8AC007;
    padding: 20px;
    width: 200px;
    height: 150px;
}

2. 指定边框的元素圆角:
{
    border-radius: 25px;
    border: 2px solid #8AC007;
    padding: 20px;
    width: 200px;
    height: 150px;
}

3. 指定背景图片的元素圆角:
{
    border-radius: 25px;
    background: url(paper.gif);
    background-position: left top;
    background-repeat: repeat;
    padding: 20px;
    width: 200px;
    height: 150px;
}

4. 四个值,第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角。
{
    border-radius: 15px 50px 30px 5px;
    background: #8AC007;
    padding: 20px;
    width: 200px;
    height: 150px;
}