实际开发项目,很多地方,都会用圆角。圆角是属于CSS 3中的属性,用起来非常的简单。咱们一起来玩玩看。

<html>
<head>
    <meta charset="utf-8">
    <!-- ... -->

    <style>
        .radius {
            border: 1px solid;
            width: 110px;
            height: 110px;
            border-radius: 10px;
        }
    </style>
</head>

<body>
<div class="radius"></div>
</body>
</html>

css 3圆角

用户头像框

利用圆角,还能制作很多有意思的东西,例如ITFun中的用户头像,就是一个圆形的框框。这个同样也是使用border-raduis制作的。

<html>
<head>
    <meta charset="utf-8">
    <!-- ... -->

    <style>
        .avatar {
            width: 110px;
            height: 110px;
            border-radius: 55px;
            overflow: hidden;
        }
    </style>
</head>

<body>
<div class="avatar">
    <img src="https://images.itfun.tv/user/avatar/40/8ab8c0.png-avatar" alt="刘 东" title="刘 东">
</div>
</body>
</html>

border-radius

overflow: hidden;的意思是,超出部分隐藏。

4个方向不同圆角


.avatar {
    /* ... */

    border-radius: 55px 10px 20px;
}

border-radius

和内外边距一样,也是顺时针方向,从左上角开始走。如果一个方向没有设置,和相对方向的圆角值一样。

Tips: border-radius设置的越大,圆角就越大。 如果想要圆形,直接设置成高、宽的一半。

总结

属性 用法举例 意义
border-radius 10px 圆角。设置成高、宽一半,就是圆形。
overflow hidden 超出部分如何处理?是出现滚动条还是隐藏