border-radius的趣味妙谈

来源：互联网发布：飞客数据恢复怎么样编辑：程序博客网时间：2024/06/05 04:52

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>

0 0