CSS 圆角

css的border-radius属性可以实现圆角、圆形、椭圆形。

实现上述圆角的前提是盒子要有边框。

规则圆角

下面的示例演示了圆角、赛道、圆形，我们先看效果图。

下面是实现的代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>圆角</title>
    <style>
        div{
            margin:20px;
        }
        div.one{
            width:50px;
            height:50px;
            border:1px solid #333;
            border-radius:7px;
        }
        div.two {
            width:120px;
            height:50px;
            border:1px solid #333;
            border-radius:50px;
        }
        div.three {
            width:120px;
            height:120px;
            border:1px solid #333;
            border-radius:120px;
        }          
    </style>
</head>
<body>
<h1>利永贞网</h1>
<h2>学编程，上利永贞网 https://www.liyongzhen.com/</h2>
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</body>
</html>

下面来说明border-radius属性：

  • 它的值 最大是盒子的最小边长，如第二个图形，最小边长是50px高，不管border-radius属性的值是200，还是500，border-radius属性的值最终都是50px，即盒子的最小边长高的那边50px.
  • border-radius 在指定一个值是，它指的是4个角的值。包括：
    • border-top-right-radius
    • border-bottom-right-radius
    • border-bottom-left-radius
    • border-top-left-radius

不规则圆角

通过为4个不同的角设置不同的值可以实现不对称的形状。

  •    border-top-right-radius
  •    border-bottom-right-radius
  •    border-bottom-left-radius
  •    border-top-left-radius

这4个属性同时有两个值，如果指定一个值，那么两个值都相同。

示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>圆角</title>
    <style>
        div{
            margin:20px;
        }
        div.one{
            width:50px;
            height:50px;
            border:1px solid #333;
            border-radius:1em 2em 1em 2em;
        }
        div.two {
            width:120px;
            height:50px;
            border:1px solid #333;
            border-radius:1em 4em 1em 2em / 2em 1em 2em 1em;
        }
        div.three {
            width:120px;
            height:120px;
            border:1px solid #333;
            border-top-right-radius: 120px 30px;
            border-top-left-radius:70px 50px;
             
        }          
    </style>
</head>
<body>
<h1>利永贞网</h1>
<h2>学编程，上利永贞网 https://www.liyongzhen.com/</h2>
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</body>
</html>

计算结果：

posted @ 2019-04-14 20:46  乱世以外  阅读(311)  评论(0)    收藏  举报