border-radius的趣味妙谈

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和%设置圆角的不同之处(填写相应的数据,然后点击相应的更改样式按钮即可)。


<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-radiush1>
    <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-radiush1>
    <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>

你可能感兴趣的:(CSS)