资料目录

圆角（border-radius）与超出隐藏（overflow）

2020年04月28日更新
观看视频

实际开发项目，很多地方，都会用圆角。圆角是属于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 超出部分如何处理？是出现滚动条还是隐藏

已添加到喜欢了