CSS制作圆角图片效果

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

FruitHardCandy

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

阅读量558

点赞数

分类专栏： WebApp css 美工design 文章标签：美工圆角图片 CSS 圆角效果图片圆角

WebApp 同时被 3 个专栏收录

30 篇文章

订阅专栏

css

11 篇文章

订阅专栏

美工design

4 篇文章

订阅专栏

网页设计的大多数地方都会用到圆角效果，如导航条，如按钮等，实际上使用CSS就可以制作出简单的圆角效果，可以试一试我下面的方法~~

源代码(直接使用就好了)：

<html>
    <head>
        <style>
        span {

    /* 这里也可以换成图片 */
    background-color:#3f769f;
    border-color: #4D8FB3 #4D8FB3 -moz-use-text-color;
    border-style: solid solid none;
    border-width: 1px 1px medium;
    color: #FFFFFF;
    width:100px;
    height:30px;
    font:bold 12px 微软雅黑;
    text-decoration: none;
    /* 圆角效果 Start */
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;

    /* 圆角效果 End */
    text-align:center;
    padding:5px 10px 5px 10px;
        }
        </style>
    <head>
    <body>
            <center>
                <span>hello world!</span>
            </center>
</body>
<html>

效果图过目：