border-radius的趣味妙谈

最新推荐文章于 2022-05-19 14:19:27 发布

樊小书生

最新推荐文章于 2022-05-19 14:19:27 发布

阅读量514

点赞数

分类专栏： CSS 文章标签： radius css3 圆角

本文链接：https://blog.csdn.net/fxss5201/article/details/70550350

版权

CSS 专栏收录该内容

23 篇文章 1 订阅

订阅专栏

border-radius相信大家都不陌生吧，主要是在页面中处理圆角。使用也很方便：

定义和用法

border-radius 属性是一个简写属性，用于设置四个 border-*-radius 属性。
提示：该属性允许您为元素添加圆角边框！

语法

border-radius: 1-4 length|% / 1-4 length|%;

注释：按此顺序设置每个 radii 的四个值。如果省略 bottom-left，则与 top-right 相同。如果省略 bottom-right，则与 top-left 相同。如果省略 top-right，则与 top-left 相同。

话句话说就是：

border-radius: 5px; ==  border-radius: 5px 5px 5px 5px;
border-radius: 5px 6px; == border-radius: 5px 6px 5px 6px;
border-radius: 5px 6px 8px; == border-radius: 5px 6px 8px 5px;

值	描述
length	定义圆角的形状。
%	以百分比定义圆角的形状。

上面主要介绍一下使用方法，现在来看一下比较有趣的事情；
当设置的是具体的长度也就是length的时候，当设置的值小于元素的最小的一边（长和宽中较小的值）的一半的时候，圆角会有相应的变化；当等于最小边的一半的时候，最小边就会变成一个半圆；当大于最小边的一半的时候，表现形式依然是之前的最小边变成半圆，不会将圆角继续扩大。

当以百分比来设置圆角的时候，当设置的是0%——50%之间的数值的时候，圆角会随着数值的增长而扩大；当为50%的时候，元素会变成椭圆；当数值大于50%的时候，元素依旧为椭圆，而且圆角不会继续扩大。

两者语义上看上去挺相同的，但是实际效果不一样，以length设置圆角的时候，当设置为最小边的一半的时候，最长边中依然会有一段线段是直线，而以百分比设置的时候，设置为50%的时候，是元素整体变为椭圆，不论是最小边还是最长边都没有直线段，这就是两者的差别。

但是如果要设置的元素是圆形的话，则设置元素的宽度的一半或者50%的时候，表现形式是一致的。

下面给的例子主要是为了演示在长方形的情况下，设置圆角的时候，以length和%设置圆角的不同之处（填写相应的数据，然后点击相应的更改样式按钮即可）。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>border-radius的length和%的区别</title>
    <style>
        .content {width: 500px;height: 240px}
        .content h1 {font-size: 14px;}  
        .change {width: 100px;height: 16px;margin: 0 20px 20px 0;display: inline-block;}
        .change-length-show,.change-number-show {width: 100px;height: 150px;background-color: red;}
        button {margin-left: 20px;}
    </style>
    <script src="http://apps.bdimg.com/libs/jquery/1.11.3/jquery.js" type="text/javascript"></script>
</head>
<body>
<div class="content">
    <h1>length控制border-radius</h1>
    <div>
        <input type="text" name="length" class="change" id="length">px<button id="change-length">更改样式</button>
        <div class="change-length-show"></div>
    </div>
</div>
<div class="content">
    <h1>%控制border-radius</h1>
    <div>
        <input type="text" name="length" class="change" id="number">%<button id="change-number">更改样式</button>
        <div class="change-number-show"></div>
    </div>
</div>
<script>
$("#change-length").on('click', function() {
    var length = $("#length").val();
    length = length ? length : 0;
    $(".change-length-show").css("border-radius", length + "px");
});
$("#change-number").on('click', function() {
    var number = $("#number").val();
    number = number ? number : 0;
    $(".change-number-show").css("border-radius", number + "%");
});
</script>
</body>
</html>