CSS制作圆角图片效果

程序员文章站 2022-04-27 21:21:18

...

网页设计的大多数地方都会用到圆角效果，如导航条，如按钮等，实际上使用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>

效果图过目：

CSS制作圆角图片效果

博客分类： WebAppcss美工design 美工圆角图片 CSS 圆角效果图片圆角