CSS2.0的圆角制作

最新推荐文章于 2024-05-23 00:00:00 发布

Codelegant

最新推荐文章于 2024-05-23 00:00:00 发布

阅读量1.2k

点赞数

CC 4.0 BY-SA版权

分类专栏： HTML+CSS 文章标签： css2.0 圆角 div

本文链接：https://blog.youkuaiyun.com/elegant_lai/article/details/17280765

HTML+CSS 专栏收录该内容

4 篇文章

订阅专栏

这篇博客介绍了如何使用CSS2.0的属性来创建圆角效果，详细讲解了相关CSS代码的实现方法，适合初学者理解。

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

个人主页：http://laichuanfeng.com/

CSS部分

         .item {
            width: 100px;
            margin: 0 auto;
            padding: 0;
            font: bold 12px arial;
        }

            .item p {
                padding: 0 0 2px 0;
                margin: 0px;
                text-align: center;
                background: #cc6;
                border: solid 1px #000;
                border-top-width: 0px;
            }

            .item div {
                height: 1px;
                overflow: hidden;
                background: #cc6;
                border-left: solid 1px #000;
                border-right: solid 1px #000;
            }

            .item .row1 {
                margin: 0 4px;
                background: #000;
            }

            .item .row2 {
                margin: 0 3px;
            }

            .item .row3 {
                margin: 0 2px;
            }

            .item .row4 {
                margin: 0 1px;
                height:2px;
            }

HTML部分

    <div class="item">
        <div class="row1"></div>
        <div class="row2"></div>
        <div class="row3"></div>
        <div class="row4"></div>
        <p>Radius</p>
    </div>

最终效果