CSS3--border-radius学习笔记

最新推荐文章于 2022-05-31 15:21:06 发布

AFeng521web

最新推荐文章于 2022-05-31 15:21:06 发布

阅读量264

点赞数

分类专栏： CSS3 文章标签： border-radius

本文链接：https://blog.csdn.net/weixin_37972723/article/details/79194861

版权

CSS3 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

一、border-radius：用于制作圆角

语法：

border-radius: none || {length|| percentage}（1~4）/ {length || percentage}(1~4);

取值说明：

length: 由浮点数和单位标识符组成的长度值，不可以取负值
percentage: 相对于元素的占据尺寸的百分比，也就是 border+padding+width

border-radius是一种缩写方法，如果”/”前后的值都存在，那么”/”前面的值设置其水平半径，”/”后面的值设置其垂直半径。如果没有”/”则水平和垂直相等，另外四个值是按照top-left、top-right、bottom-right、bottom-left的顺序设置的。

分开取值：
如： border-top-left-radius: 5px 5px ;
注意点：支持最多两个值，且必须用空格隔开，分别表示水平半径和垂直半径。
公式： border-垂直-水平-radius: 水平垂直

几个重要的特性

一、border-radius还有一个内半径和外半径之分，它主要是元素边框值较大时，效果就明显，当我们border-radius半径值小于或等于border的厚度时，我们的边框内部就不具有任何的圆角效果。

.big-border {
    border: 15px solid green;
    border-radius: 15px;
}

出现这种情况的原因：
border-radius的内径值是等于外径值减去边框的厚度，当它们为负值时，内径默认为0；同时也说明border-radius的内外曲线的圆心并不一定是一致的。只有当边框厚度为0时，我们内外曲线的圆心才会在同一位置。

二、如果角的两个相邻边有不同的宽度，那么这个角将会从宽的边平滑过度到窄的边。其中一条边甚至可以是0。相邻转角是由大向小转。

.demo {
    border-width: 10px 5px 20px 3px;
}

三、相邻两条边颜色和线条样式不同时，那么两条相邻边颜色和样式转变的中心点是在一个和两边宽度成正比的角上。比如，两条边宽度相同，这个点就是一个45°的角上，如果一条边是另外一条边的两倍，那么这个点就在一个30°的角上。界定这个转变的线就是连接在内外曲线上的两个点的直线。

四、大值特性
就是设置的值很大的时候，只会使用能够渲染的圆角大小进行渲染。

五、等比例特性
水平和垂直半斤的比例是恒定不变的。
如何利用等比例特性实现border-radius: 50%的效果？
保持元素的占据尺寸比例与水平半径和垂直半径比例一样，然后利用大值特性设置一个很大的安全阈值就可以了。

border-radius属性的优点：
1.制作圆角图片的时间省了。
2.减少了网站的维护工作量，少了对图片的更新制作，代码的替换。
3.提高了网站的性能，少了对图片的的http请求，网页的加载速度变快了。
4.增加了视觉美感。

18年5月6日补充点：

border-radius：定位原点（边框的外侧）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        #test {
            width: 100px;
            height: 100px;
            background-color: pink;
            border: 20px solid #000;
            margin: 20px;
            -webkit-border-radius:20px;
            -moz-border-radius:20px;
            border-radius:20px;
        }
    </style>

</head>

<body>
<div class="radius-test" id="test"></div>
</body>
</html>