李涛自留地
回到顶部
首页 > 前端 > Css3圆角border-radius的使用方法 Css3圆角使用场景

Css3圆角border-radius的使用方法 Css3圆角使用场景

文章目录

通常我们看到有的网站在图片或者是某模块四个角都有圆角的效果，使得网站看上去更加的美观，其实这个就是使用了Css3的圆角样式，在Css3中实现圆角主要是在Css样式中添加了border-radius属性，今天主要记载的就是Css圆角border-radius的使用场景及使用方法。

border-radius常用使用场景

1、图片圆角处理

很多图片站使用border-radius属性使图片四个角成圆角，这样图片看上去更加美观，这也是很多图片站对于页面美观美化的一个细节。

2、边框圆角处理

使用在侧边栏及网页大模块场景较多，大多也是出于页面美观的角度对于大模块及侧边栏进行圆角处理。

3、搜索框圆角处理

百度搜索框就对四个角进行了圆角处理，很多网站也是使用border-radius对搜索框的四个角进行了圆角处理。

4、tags标签圆角处理

很多网站对网站Tags标签也进行了圆角处理，这样看上去也是更加美观。

5、背景颜色区域进行圆角处理

有一些网站在处理网站热门文章排行，会在热门文章前面添加递增数字，数字加上背景并对背景区域进行了圆角处理，这样也会在视觉上看上去更美观。

以上就是笔者简单总结的一些在css样式中使用border-radius属性对页面某一部位进行圆角处理的地方，当然还有一些网站会对登录框、留言框等等区域也进行圆角处理，border-radius使用的场景还是比较多的。

border-radius如何使用

上面笔者介绍很多border-radius的常用场景，那么border-radius在Css中怎么使用呢？其实border-radius使用起来还是比较简单的，下面通过实例来介绍border-radius如何使用。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .demo {
            margin: 50px auto;
            width: 300px;
            height: 200px;
            background-color: red;
            border-radius: 10px 50px;
        }
    </style>
</head>

<body>
    <div class="demo">

    </div>
</body>

</html>

上面简单写了一个html页面，让.demo这个div呈现出了圆角。

Css3圆角border-radius的使用方法 Css3圆角使用场景

通过上图，我们可以发现border-radius如果设置为两个值的时候显示的方向是上下/右左的值(上面10px 20px)，如果把四个角的值都写出来就是border-radius: 10px（top) 50px(right) 10px(bottom) 50px(left);，简写就是border-radius: 10px 50px;

border-radius如何设置上面或者下两个圆角

根据上面对border-radius圆角四个值的了解，如果我们只需要上面两个圆角，那么就可以只写前面两个值，后面两个值设置为0；如果只需要下面两个是圆角，就可以直接将前面两个值设置为0，只要后面两个值。

border-radius设置四个一样的圆角

border-radius设置四个一样的圆角这个是最常见的情况，只用在border-radius写入一个值就可以实现某一个元素四个圆角的效果。

border-radius值的单位

border-radius值的单位可以是px，rem，em和百分比。

border-radius的兼容性

大部分浏览器现在都兼容border-radius属性，除了低版本的IE8以下不支持以外，大部分浏览器都支持border-radius属性。

border-radius圆角注意事项

border-radius的值不能为负数，如果设置的border-radius的值为负数的时候，border-radius就不会出现圆角效果。

以上就是对于border-radius实现css圆角的介绍，希望看完本文后会对你有所帮助，更多关于border-radius相关的要点还是需要自己多操作和发现以及总结。

若非作者标注皆为李涛自留地原创文章，转载或复制请以超链接形式并注明出处。