moofing's blog
首页 标签 分类 归档 RSS

border-radius画圆以及border绘制图形

2020-11-17 CSS3 | 本篇文章共2.5k字，预计阅读13分钟

border-radius画圆以及border绘制图形

1. 利用border-radius绘制圆形类图形

  • border-radius是一个简写属性，它包含4个方向的属性设置
  • border-top-left-radius左上，
  • border-top-right-radius右上
  • border-bottom-left-radius左下
  • border-bottom-right-radius右下
  • 另外每个方向上的border-radius值由x/y方向上的半径决定，1个半径值则是正圆弧，2个半径值则是椭圆弧
  • 4个值: 第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角。
  • 3个值: 第一个值为左上角, 第二个值为右上角和左下角，第三个值为右下角
  • 2个值: 第一个值为左上角与右下角，第二个值为右上角与左下角
  • 1个值：四个圆角值相同
  • 正方形+border-radius:50%即是正圆（如下示例）
  • 若正方形任意一边缩减至1/2,则会绘制不同方向上的半圆和关于原点对称的圆弧（如下示例）
  • 若正方形整体缩减1/2,则会绘制不同方向上的扇形（如下示例）
  • 大小圆形的堆砌就会形成一个太极阴阳图（如下示例）

示例1

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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
<style type="text/css">
     * {
       margin:0;
       padding:0;
     }
     .outBox {
       width:150px;
       height:2000px;
       margin:50px auto;
     }
     .box {
       margin-top:20px;
     }
     .box1 {
       width:150px;
       height:75px;
       background-color:#f0f;
       border-top-left-radius:75px;
       border-top-right-radius:75px;
     }
     .box2 {
       width:150px;
       height:75px;
       background-color:#f0f;
       border-bottom-left-radius:75px;
       border-bottom-right-radius:75px;
     }
     .box3 {
       width:75px;
       height:150px;
       background-color:#f0f;
       border-top-left-radius:75px;
       border-bottom-left-radius:75px;
     }
     .box4 {
       width:75px;
       height:150px;
       background-color:#f0f;
       border-top-right-radius:75px;
       border-bottom-right-radius:75px;
     }
     .box5 {
       width:75px;
       height:150px;
       background-color:#f0f;
       border-top-left-radius:75px;
       border-bottom-right-radius:75px;
     }
     .box6 {
       width:75px;
       height:150px;
       background-color:#f0f;
       border-top-right-radius:75px;
       border-bottom-left-radius:75px;
     }
     .box7 {
       width:150px;
       height:75px;
       background-color:#f0f;
       border-top-left-radius:75px;
       border-bottom-right-radius:75px;
     }
     .box8 {
       width:150px;
       height:75px;
       background-color:#f0f;
       border-bottom-left-radius:75px;
       border-top-right-radius:75px;
     }
     .box9 {
       width:75px;
       height:75px;
       background-color:#f0f;
       border-top-left-radius:75px;
     }
     .box10 {
       width:75px;
       height:75px;
       background-color:#f0f;
       border-top-right-radius:75px;
     }
     .box11 {
       width:75px;
       height:75px;
       background-color:#f0f;
       border-bottom-left-radius:75px;
     }
     .box12 {
       width:75px;
       height:75px;
       background-color:#f0f;
       border-bottom-right-radius:75px;
     }
   </style>
 </head>
 <body>
   <div class="outBox">
     <div>
       <div class="box1 box">
       </div>
       <p>上半圆</p>
     </div>
     <div>
       <div class="box2 box">
       </div>
       <p>下半圆</p>
     </div>
     <div>
       <div class="box3 box">
       </div>
       <p>左半圆</p>
     </div>
     <div>
       <div class="box4 box">
       </div>
       <p>右半圆</p>
       <div>
         <div class="box5 box">
         </div>
         <p>左半圆变体，正圆1/4圆弧对称</p>
       </div>
       <div>
         <div class="box6 box">
         </div>
         <p>右半圆变体，正圆1/4圆弧对称</p>
       </div>
       <div>
         <div class="box7 box">
         </div>
         <p>上半圆变体，正圆1/4圆弧对称</p>
       </div>
     </div>
     <div>
       <div class="box8 box">
       </div>
       <p>下半圆变体，正圆1/4圆弧对称</p>
     </div>
     <div>
       <div class="box9 box">
       </div>
       <p>正圆左上1/4扇形</p>
     </div>
     <div>
       <div class="box10 box">
       </div>
       <p>正圆右上1/4扇形</p>
     </div>
     <div>
       <div class="box11 box">
       </div>
       <p>正圆左下1/4扇形</p>
     </div>
     <div>
       <div class="box12 box">
       </div>
       <p>正圆右下1/4扇形</p>
     </div>
   </div>
 </body>

效果

radius.gif

示例2

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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
<style type="text/css">
     * {
       margin:0;
       padding:0;
     }
     body {
       background-color:rgb(199, 221, 255);
     }
     .taiJi {
       margin:150px auto;
     }
     .outBox {
       width:200px;
       height:200px;
       position:relative;
       margin:0 auto;
       transition:all 0.6s;
     }
     .outBox:hover {
       transform:scale(1.2);
     }
     .leftCycle {
       position:absolute;
       left:0;
       top:0;
       width:100px;
       height:200px;
       background-color:#000;
       border-top-left-radius:100px;
       border-bottom-left-radius:100px;
     }
     .rightCycle {
       position:absolute;
       top:0;
       right:0;
       width:100px;
       height:200px;
       background-color:#fff;
       border-top-right-radius:100px;
       border-bottom-right-radius:100px;
     }
     .downCycle {
       position:absolute;
       top:100px;
       left:100px;
       width:50px;
       height:100px;
       background-color:#000;
       border-top-right-radius:50px;
       border-bottom-right-radius:50px;
     }
     .upCycle {
       position:absolute;
       top:0px;
       left:50px;
       width:50px;
       height:100px;
       background-color:#fff;
       border-top-left-radius:50px;
       border-bottom-left-radius:50px;
     }
     .innerupCycle {
       position:absolute;
       top:33px;
       left:83px;
       width:34px;
       height:34px;
       background-color:#000;
       border-radius:50%;
     }
     .innerdownCycle {
       position:absolute;
       bottom:33px;
       left:83px;
       width:34px;
       height:34px;
       background-color:#fff;
       border-radius:50%;
     }
   </style>
 </head>
 <body>
   <div class="taiJi">
     <div class="outBox">
       <div class="leftCycle">
       </div>
       <div class="rightCycle">
       </div>
       <div class="upCycle">
       </div>
       <div class="downCycle">
       </div>
       <div class="innerdownCycle">
       </div>
       <div class="innerupCycle">
       </div>   
     </div>
   </div>
 </body>

效果

taiji.gif

2. 妙用border属性绘制各种不同的形状

  • 在1个只设有4边边距的盒子模型里，它呈现的结果是4个紧密集中的等腰三角形（如下示例）
  • 在这4个紧密的等腰三角形中，左右2边边距决定的是这个盒子的宽度，上下2边边距则是盒子的高度
  • 通过设置其中某边边距为0，或者相邻边边距透明，以及x/y方向上的边距，即可得到一个三角形和等腰直角三角形（如下示例）
  • 在1个设有4边边距和内容区宽度的盒子模型里，通过边距为0和边距透明，会得到某个方向上的梯形（如下示例）
  • 在梯形、三角形、矩形的基础上，通过伪元素即可组合得到五边形和六边形，或者五角形、六角形（如下示例）

三角形、等腰直角三角形、对话框示例

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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
<style type="text/css">
     * {
       margin:0;
       padding:0;
     }
     .outBox {
       width:200px;
       height:1000px;
       margin:0 auto;
     }
     .fourSide {
       width:50px;
       height:50px;
       border-top:50px solid #f00;
       border-bottom:50px solid rgb(0, 255, 149);
       border-left:50px solid rgb(138, 115, 223);
       border-right:50px solid rgb(235, 104, 235);
       background-color:yellowgreen;
     }
     .limited {
       width:0px;
       height:0px;
       border-top:50px solid #f00;
       border-bottom:50px solid rgb(0, 255, 149);
       border-left:50px solid rgb(138, 115, 223);
       border-right:50px solid rgb(235, 104, 235);
       background-color:yellowgreen;
     }
     .Triangle {
       width:0px;
       height:0px;
       border-top:0px solid #f00;
       border-bottom:50px solid rgb(0, 255, 149);
       border-left:50px solid  transparent ;
       border-right:50px solid transparent ;
     }
     .Triangle-left {
       width:0px;
       height:0px;
       border-top:50px solid transparent;
       border-bottom:50px solid transparent;
       border-left:50px solid  rgb(138, 115, 223) ;
       border-right:0px solid rgb(235, 104, 235) ;
     }
     .half {
       width:0px;
       height:0px;
     /*  border-top:0px solid #f00; */
       border-bottom:50px solid rgb(0, 255, 149);
       border-left:50px solid rgb(138, 115, 223);
     /*  border-right:0px solid rgb(235, 104, 235);*/
     }
     .Rectangular {
       width:0px;
       height:0px;
       border-bottom:transparent 50px solid;
       border-left:50px solid rgb(138, 115, 223);
     }
     .talkBox {
       position:relative;
       width:400px;
       height:50px;
       line-height:50px;
       background-color:thistle;
       text-align:center;
     }
     .talkBox:before {
       position:absolute;
       left:40px;
       bottom:-30px;
       content:"";
       display:block;
       width:0px;
       height:0px;
       border-left:30px solid thistle;
       border-bottom:transparent 30px solid;
     }
   </style>
 </head>
 <body>
   <div class="outBox">
     <div>
       <div class="fourSide">
       </div>
       <p>直观地理解边框</p>
     </div>
     <div>
       <div class="limited">
       </div>
       <p>边框的极限形式</p>
     </div>
     <div>
       <div class="Triangle">
       </div>
       <p>三角形下</p>
     </div>
     <div>
       <div class="Triangle-left">
       </div>
       <p>三角形左</p>
     </div>
     <div>
       <div class="half">
       </div>
       <p>2个等腰直角三角形:即是通过只设置相邻2边边距（剩下的2边不设置边距也就是说边距为0），使整个外框X/Y
         方向长度均折半，正好切出2个等腰直角三角形，并且自身边距保持不变</p>
     </div>
     <div>
       <div class="Rectangular">
       </div>
       <p>在2个等腰直角三角形的基础之上，设置其中一边透明，即会得到1个等腰直角三角形</p>
     </div>
     <div class="talkBox">
       <p>这仅仅是一个开始！需要主动探索不一样的感觉。</p>
     </div>
   <div>
 </body>

效果

三角形.gif

五边形、六边形示例

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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<style type="text/css">
      * {
        margin:0;
        padding:0;
      }
      .fiveSide {
        position:relative;
        width:60px;
        height:0;
        border-top:50px solid #00f;
        border-left:20px solid transparent;
        border-right:20px solid transparent;
        margin:100px auto;
      }
      .fiveSide:before {
        position:absolute;
        top:-100px;
        left:-20px;
        content:"";
        width:0px;
        height:0px;
        border-bottom:50px solid #00f;
        border-left:50px solid transparent;
        border-right:50px solid transparent;
      }
      .sixSide {
        position:relative;
        margin:100px auto;
        width:100px;
        height:50px;
        background-color:#ff00ff;
      }
      .sixSide:before {
        position:absolute;
        top:-40px;
        content:"";
        width:0px;
        height:0px;
        border-bottom:40px solid #f0f;
        border-left:50px solid transparent;
        border-right:50px solid transparent;
      }
      .sixSide:after {
        position:absolute;
        top:50px;
        content:"";
        width:0px;
        height:0px;
        border-top:40px solid #f0f;
        border-left:50px solid transparent;
        border-right:50px solid transparent;
      }
    </style>
  </head>
  <body>
    <div class="fiveSide">
    </div>
    <div class="sixSide">
    </div>
  </body>

效果

五六边形.png

五角形、六角形示例

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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
<style type="text/css">
      .boxs {
        width:100px;
        margin:100px auto;
      }
      .box {
        position: relative;
        width:0px;
        height:0px;
        border-bottom:70px solid rgb(233, 96, 96);
        border-left:transparent 100px solid;
        border-right:transparent 100px solid;
        transform:rotate(35deg);
        }
        .box:before {
          position:absolute;
          top:-45px;
          left:-60px;
          content:"";
          display:block;
          width:0px;
          height:0px;
          border-bottom:90px solid rgb(233, 96, 96);
          border-left:transparent 35px solid;
          border-right:transparent 35px solid;
          transform:rotate(-35deg);
        }
        .box:after {
          position:absolute;
          top:3px;
          left:-105px;
          content:"";
          display:block;
          width:0px;
          height:0px;
          border-bottom:70px solid rgb(233, 96, 96);
          border-left:transparent 100px solid;
          border-right:transparent 100px solid;
          transform:rotate(-70deg);
        }
        .outBox {
          position:relative;
          width:0px;
          height:0px;
          border-bottom:100px solid rgb(137, 233, 250);
          border-left:transparent 60px solid;
          border-right:transparent 60px solid;
          margin-top:100px;
          }
        .outBox:after {
          position:absolute;
          left:-60px;
          top:35px;
          content:"";
          display:block;
          width:0px;
          height:0px;
          border-top:100px solid rgb(137, 233, 250);
          border-left:transparent 60px solid;
          border-right:transparent 60px solid;
        }
    </style>
  </head>
  <body>
    <div class="boxs">
      <div class="box">
      </div>
      <div class="outBox">
      </div> 
    </div>
  </body>

效果

五、六角形.png

本文作者： moofing

本文链接： https://moofing.gitee.io/posts/47609.html

版权声明： 本文采用 CC BY-NC-SA 4.0进行许可，转载或引用时请遵守该协议

更新于 2020-11-30

CSS3# border-radius# border
Previous Post
伪类选择器和伪元素
Next Post
关于CSS3动画