iphoneのアイコンの角丸をcssで表現しようとすると
border-radius: 27px; とかじゃキッチリ同じにはならないそうです。
.smooth_corner_r27 {
background: ...;
border-radius: 27px;
}
@supports (mask-image: paint(smooth-corners)) {
.el.is-loaded {
border-radius: 0;
mask-image: paint(smooth-corners);
--smooth-corners: 12;
}
}
とかやらないとキレイにならないのです。
Smooth Corners、Smooth Curves、Continuous Corner Curve、Squircle Corner
と諸説呼び方があるようです。
ios7よりも前はもっとトガッてたみたいっすね。
これだけ広く利用されているのでアイコンに採用しようとするのですが
この半径の長さ。これがどこも曖昧でした。
なので 対応表作成しました。
1辺の長さpx
R半径px=辺長÷4.5
8
1.777777778
9
2
10
2.222222222
11
2.444444444
12
2.666666667
13
2.888888889
14
3.111111111
15
3.333333333
16
3.555555556
17
3.777777778
18
4
19
4.222222222
20
4.444444444
21
4.666666667
22
4.888888889
23
5.111111111
24
5.333333333
25
5.555555556
26
5.777777778
27
6
28
6.222222222
29
6.444444444
30
6.666666667
31
6.888888889
32
7.111111111
33
7.333333333
34
7.555555556
35
7.777777778
36
8
37
8.222222222
38
8.444444444
39
8.666666667
40
8.888888889
41
9.111111111
42
9.333333333
43
9.555555556
44
9.777777778
45
10
46
10.22222222
47
10.44444444
48
10.66666667
49
10.88888889
50
11.11111111
51
11.33333333
52
11.55555556
53
11.77777778
54
12
55
12.22222222
56
12.44444444
57
12.66666667
58
12.88888889
59
13.11111111
60
13.33333333
61
13.55555556
62
13.77777778
63
14
64
14.22222222
65
14.44444444
66
14.66666667
67
14.88888889
68
15.11111111
69
15.33333333
70
15.55555556
71
15.77777778
72
16
73
16.22222222
74
16.44444444
75
16.66666667
76
16.88888889
77
17.11111111
78
17.33333333
79
17.55555556
80
17.77777778
81
18
82
18.22222222
83
18.44444444
84
18.66666667
85
18.88888889
86
19.11111111
87
19.33333333
88
19.55555556
89
19.77777778
90
20
91
20.22222222
92
20.44444444
93
20.66666667
94
20.88888889
95
21.11111111
96
21.33333333
97
21.55555556
98
21.77777778
99
22
100
22.22222222
101
22.44444444
102
22.66666667
103
22.88888889
104
23.11111111
105
23.33333333
106
23.55555556
107
23.77777778
108
24
109
24.22222222
110
24.44444444
111
24.66666667
112
24.88888889
113
25.11111111
114
25.33333333
115
25.55555556
116
25.77777778
117
26
118
26.22222222
119
26.44444444
120
26.66666667
121
26.88888889
122
27.11111111
123
27.33333333
124
27.55555556
125
27.77777778
126
28
127
28.22222222
128
28.44444444
129
28.66666667
130
28.88888889
131
29.11111111
132
29.33333333
133
29.55555556
134
29.77777778
135
30
136
30.22222222
137
30.44444444
138
30.66666667
139
30.88888889
140
31.11111111
141
31.33333333
142
31.55555556
143
31.77777778
144
32
145
32.22222222
146
32.44444444
147
32.66666667
148
32.88888889
149
33.11111111
150
33.33333333
151
33.55555556
152
33.77777778
153
34
154
34.22222222
155
34.44444444
156
34.66666667
157
34.88888889
158
35.11111111
159
35.33333333
160
35.55555556
161
35.77777778
162
36
163
36.22222222
164
36.44444444
165
36.66666667
166
36.88888889
167
37.11111111
168
37.33333333
169
37.55555556
170
37.77777778
171
38
172
38.22222222
173
38.44444444
174
38.66666667
175
38.88888889
176
39.11111111
177
39.33333333
178
39.55555556
179
39.77777778
180
40
181
40.22222222
182
40.44444444
183
40.66666667
184
40.88888889
185
41.11111111
186
41.33333333
187
41.55555556
188
41.77777778
189
42
190
42.22222222
191
42.44444444
192
42.66666667
193
42.88888889
194
43.11111111
195
43.33333333
196
43.55555556
197
43.77777778
198
44
199
44.22222222
200
44.44444444
201
44.66666667
202
44.88888889
203
45.11111111
204
45.33333333
205
45.55555556
206
45.77777778
207
46
208
46.22222222
209
46.44444444
210
46.66666667
211
46.88888889
212
47.11111111
213
47.33333333
214
47.55555556
215
47.77777778
216
48
217
48.22222222
218
48.44444444
219
48.66666667
220
48.88888889
221
49.11111111
222
49.33333333
223
49.55555556
224
49.77777778
225
50
226
50.22222222
227
50.44444444
228
50.66666667
229
50.88888889
230
51.11111111
231
51.33333333
232
51.55555556
233
51.77777778
234
52
235
52.22222222
236
52.44444444
237
52.66666667
238
52.88888889
239
53.11111111
240
53.33333333
241
53.55555556
242
53.77777778
243
54
244
54.22222222
245
54.44444444
246
54.66666667
247
54.88888889
248
55.11111111
249
55.33333333
250
55.55555556
251
55.77777778
252
56
253
56.22222222
254
56.44444444
255
56.66666667
256
56.88888889
257
57.11111111
258
57.33333333
259
57.55555556
260
57.77777778
261
58
262
58.22222222
263
58.44444444
264
58.66666667
265
58.88888889
266
59.11111111
267
59.33333333
268
59.55555556
269
59.77777778
270
60
271
60.22222222
272
60.44444444
273
60.66666667
274
60.88888889
275
61.11111111
276
61.33333333
277
61.55555556
278
61.77777778
279
62
280
62.22222222
281
62.44444444
282
62.66666667
283
62.88888889
284
63.11111111
285
63.33333333
286
63.55555556
287
63.77777778
288
64
289
64.22222222
290
64.44444444
291
64.66666667
292
64.88888889
293
65.11111111
294
65.33333333
295
65.55555556
296
65.77777778
297
66
298
66.22222222
299
66.44444444
300
66.66666667
301
66.88888889
302
67.11111111
303
67.33333333
304
67.55555556
305
67.77777778
306
68
307
68.22222222
308
68.44444444
309
68.66666667
310
68.88888889
311
69.11111111
312
69.33333333
313
69.55555556
314
69.77777778
315
70
316
70.22222222
317
70.44444444
318
70.66666667
319
70.88888889
320
71.11111111
321
71.33333333
322
71.55555556
323
71.77777778
324
72
325
72.22222222
326
72.44444444
327
72.66666667
328
72.88888889
329
73.11111111
330
73.33333333
331
73.55555556
332
73.77777778
333
74
334
74.22222222
335
74.44444444
336
74.66666667
337
74.88888889
338
75.11111111
339
75.33333333
340
75.55555556
341
75.77777778
342
76
343
76.22222222
344
76.44444444
345
76.66666667
346
76.88888889
347
77.11111111
348
77.33333333
349
77.55555556
350
77.77777778
351
78
352
78.22222222
353
78.44444444
354
78.66666667
355
78.88888889
356
79.11111111
357
79.33333333
358
79.55555556
359
79.77777778
360
80
361
80.22222222
362
80.44444444
363
80.66666667
364
80.88888889
365
81.11111111
366
81.33333333
367
81.55555556
368
81.77777778
369
82
370
82.22222222
371
82.44444444
372
82.66666667
373
82.88888889
374
83.11111111
375
83.33333333
376
83.55555556
377
83.77777778
378
84
379
84.22222222
380
84.44444444
381
84.66666667
382
84.88888889
383
85.11111111
384
85.33333333
385
85.55555556
386
85.77777778
387
86
388
86.22222222
389
86.44444444
390
86.66666667
391
86.88888889
392
87.11111111
393
87.33333333
394
87.55555556
395
87.77777778
396
88
397
88.22222222
398
88.44444444
399
88.66666667
400
88.88888889
401
89.11111111
402
89.33333333
403
89.55555556
404
89.77777778
405
90
406
90.22222222
407
90.44444444
408
90.66666667
409
90.88888889
410
91.11111111
411
91.33333333
412
91.55555556
413
91.77777778
414
92
415
92.22222222
416
92.44444444
417
92.66666667
418
92.88888889
419
93.11111111
420
93.33333333
421
93.55555556
422
93.77777778
423
94
424
94.22222222
425
94.44444444
426
94.66666667
427
94.88888889
428
95.11111111
429
95.33333333
430
95.55555556
431
95.77777778
432
96
433
96.22222222
434
96.44444444
435
96.66666667
436
96.88888889
437
97.11111111
438
97.33333333
439
97.55555556
440
97.77777778
441
98
442
98.22222222
443
98.44444444
444
98.66666667
445
98.88888889
446
99.11111111
447
99.33333333
448
99.55555556
449
99.77777778
450
100
451
100.2222222
452
100.4444444
453
100.6666667
454
100.8888889
455
101.1111111
456
101.3333333
457
101.5555556
458
101.7777778
459
102
460
102.2222222
461
102.4444444
462
102.6666667
463
102.8888889
464
103.1111111
465
103.3333333
466
103.5555556
467
103.7777778
468
104
469
104.2222222
470
104.4444444
471
104.6666667
472
104.8888889
473
105.1111111
474
105.3333333
475
105.5555556
476
105.7777778
477
106
478
106.2222222
479
106.4444444
480
106.6666667
481
106.8888889
482
107.1111111
483
107.3333333
484
107.5555556
485
107.7777778
486
108
487
108.2222222
488
108.4444444
489
108.6666667
490
108.8888889
491
109.1111111
492
109.3333333
493
109.5555556
494
109.7777778
495
110
496
110.2222222
497
110.4444444
498
110.6666667
499
110.8888889
500
111.1111111
501
111.3333333
502
111.5555556
503
111.7777778
504
112
505
112.2222222
506
112.4444444
507
112.6666667
508
112.8888889
509
113.1111111
510
113.3333333
511
113.5555556
512
113.7777778
513
114
514
114.2222222
515
114.4444444
516
114.6666667
517
114.8888889
518
115.1111111
519
115.3333333
520
115.5555556
521
115.7777778
522
116
523
116.2222222
524
116.4444444
525
116.6666667
526
116.8888889
527
117.1111111
528
117.3333333
529
117.5555556
530
117.7777778
531
118
532
118.2222222
533
118.4444444
534
118.6666667
535
118.8888889
536
119.1111111
537
119.3333333
538
119.5555556
539
119.7777778
540
120
541
120.2222222
542
120.4444444
543
120.6666667
544
120.8888889
545
121.1111111
546
121.3333333
547
121.5555556
548
121.7777778
549
122
550
122.2222222
551
122.4444444
552
122.6666667
553
122.8888889
554
123.1111111
555
123.3333333
556
123.5555556
557
123.7777778
558
124
559
124.2222222
560
124.4444444
561
124.6666667
562
124.8888889
563
125.1111111
564
125.3333333
565
125.5555556
566
125.7777778
567
126
568
126.2222222
569
126.4444444
570
126.6666667
571
126.8888889
572
127.1111111
573
127.3333333
574
127.5555556
575
127.7777778
576
128
577
128.2222222
578
128.4444444
579
128.6666667
580
128.8888889
581
129.1111111
582
129.3333333
583
129.5555556
584
129.7777778
585
130
586
130.2222222
587
130.4444444
588
130.6666667
589
130.8888889
590
131.1111111
591
131.3333333
592
131.5555556
593
131.7777778
594
132
595
132.2222222
596
132.4444444
597
132.6666667
598
132.8888889
599
133.1111111
600
133.3333333
601
133.5555556
602
133.7777778
603
134
604
134.2222222
605
134.4444444
606
134.6666667
607
134.8888889
608
135.1111111
609
135.3333333
610
135.5555556
611
135.7777778
612
136
613
136.2222222
614
136.4444444
615
136.6666667
616
136.8888889
617
137.1111111
618
137.3333333
619
137.5555556
620
137.7777778
621
138
622
138.2222222
623
138.4444444
624
138.6666667
625
138.8888889
626
139.1111111
627
139.3333333
628
139.5555556
629
139.7777778
630
140
631
140.2222222
632
140.4444444
633
140.6666667
634
140.8888889
635
141.1111111
636
141.3333333
637
141.5555556
638
141.7777778
639
142
640
142.2222222
641
142.4444444
642
142.6666667
643
142.8888889
644
143.1111111
645
143.3333333
646
143.5555556
647
143.7777778
648
144
649
144.2222222
650
144.4444444
651
144.6666667
652
144.8888889
653
145.1111111
654
145.3333333
655
145.5555556
656
145.7777778
657
146
658
146.2222222
659
146.4444444
660
146.6666667
661
146.8888889
662
147.1111111
663
147.3333333
664
147.5555556
665
147.7777778
666
148
667
148.2222222
668
148.4444444
669
148.6666667
670
148.8888889
671
149.1111111
672
149.3333333
673
149.5555556
674
149.7777778
675
150
676
150.2222222
677
150.4444444
678
150.6666667
679
150.8888889
680
151.1111111
681
151.3333333
682
151.5555556
683
151.7777778
684
152
685
152.2222222
686
152.4444444
687
152.6666667
688
152.8888889
689
153.1111111
690
153.3333333
691
153.5555556
692
153.7777778
693
154
694
154.2222222
695
154.4444444
696
154.6666667
697
154.8888889
698
155.1111111
699
155.3333333
700
155.5555556
701
155.7777778
702
156
703
156.2222222
704
156.4444444
705
156.6666667
706
156.8888889
707
157.1111111
708
157.3333333
709
157.5555556
710
157.7777778
711
158
712
158.2222222
713
158.4444444
714
158.6666667
715
158.8888889
716
159.1111111
717
159.3333333
718
159.5555556
719
159.7777778
720
160
721
160.2222222
722
160.4444444
723
160.6666667
724
160.8888889
725
161.1111111
726
161.3333333
727
161.5555556
728
161.7777778
729
162
730
162.2222222
731
162.4444444
732
162.6666667
733
162.8888889
734
163.1111111
735
163.3333333
736
163.5555556
737
163.7777778
738
164
739
164.2222222
740
164.4444444
741
164.6666667
742
164.8888889
743
165.1111111
744
165.3333333
745
165.5555556
746
165.7777778
747
166
748
166.2222222
749
166.4444444
750
166.6666667
751
166.8888889
752
167.1111111
753
167.3333333
754
167.5555556
755
167.7777778
756
168
757
168.2222222
758
168.4444444
759
168.6666667
760
168.8888889
761
169.1111111
762
169.3333333
763
169.5555556
764
169.7777778
765
170
766
170.2222222
767
170.4444444
768
170.6666667
769
170.8888889
770
171.1111111
771
171.3333333
772
171.5555556
773
171.7777778
774
172
775
172.2222222
776
172.4444444
777
172.6666667
778
172.8888889
779
173.1111111
780
173.3333333
781
173.5555556
782
173.7777778
783
174
784
174.2222222
785
174.4444444
786
174.6666667
787
174.8888889
788
175.1111111
789
175.3333333
790
175.5555556
791
175.7777778
792
176
793
176.2222222
794
176.4444444
795
176.6666667
796
176.8888889
797
177.1111111
798
177.3333333
799
177.5555556
800
177.7777778
801
178
802
178.2222222
803
178.4444444
804
178.6666667
805
178.8888889
806
179.1111111
807
179.3333333
808
179.5555556
809
179.7777778
810
180
811
180.2222222
812
180.4444444
813
180.6666667
814
180.8888889
815
181.1111111
816
181.3333333
817
181.5555556
818
181.7777778
819
182
820
182.2222222
821
182.4444444
822
182.6666667
823
182.8888889
824
183.1111111
825
183.3333333
826
183.5555556
827
183.7777778
828
184
829
184.2222222
830
184.4444444
831
184.6666667
832
184.8888889
833
185.1111111
834
185.3333333
835
185.5555556
836
185.7777778
837
186
838
186.2222222
839
186.4444444
840
186.6666667
841
186.8888889
842
187.1111111
843
187.3333333
844
187.5555556
845
187.7777778
846
188
847
188.2222222
848
188.4444444
849
188.6666667
850
188.8888889
851
189.1111111
852
189.3333333
853
189.5555556
854
189.7777778
855
190
856
190.2222222
857
190.4444444
858
190.6666667
859
190.8888889
860
191.1111111
861
191.3333333
862
191.5555556
863
191.7777778
864
192
865
192.2222222
866
192.4444444
867
192.6666667
868
192.8888889
869
193.1111111
870
193.3333333
871
193.5555556
872
193.7777778
873
194
874
194.2222222
875
194.4444444
876
194.6666667
877
194.8888889
878
195.1111111
879
195.3333333
880
195.5555556
881
195.7777778
882
196
883
196.2222222
884
196.4444444
885
196.6666667
886
196.8888889
887
197.1111111
888
197.3333333
889
197.5555556
890
197.7777778
891
198
892
198.2222222
893
198.4444444
894
198.6666667
895
198.8888889
896
199.1111111
897
199.3333333
898
199.5555556
899
199.7777778
900
200
901
200.2222222
902
200.4444444
903
200.6666667
904
200.8888889
905
201.1111111
906
201.3333333
907
201.5555556
908
201.7777778
909
202
910
202.2222222
911
202.4444444
912
202.6666667
913
202.8888889
914
203.1111111
915
203.3333333
916
203.5555556
917
203.7777778
918
204
919
204.2222222
920
204.4444444
921
204.6666667
922
204.8888889
923
205.1111111
924
205.3333333
925
205.5555556
926
205.7777778
927
206
928
206.2222222
929
206.4444444
930
206.6666667
931
206.8888889
932
207.1111111
933
207.3333333
934
207.5555556
935
207.7777778
936
208
937
208.2222222
938
208.4444444
939
208.6666667
940
208.8888889
941
209.1111111
942
209.3333333
943
209.5555556
944
209.7777778
945
210
946
210.2222222
947
210.4444444
948
210.6666667
949
210.8888889
950
211.1111111
951
211.3333333
952
211.5555556
953
211.7777778
954
212
955
212.2222222
956
212.4444444
957
212.6666667
958
212.8888889
959
213.1111111
960
213.3333333
961
213.5555556
962
213.7777778
963
214
964
214.2222222
965
214.4444444
966
214.6666667
967
214.8888889
968
215.1111111
969
215.3333333
970
215.5555556
971
215.7777778
972
216
973
216.2222222
974
216.4444444
975
216.6666667
976
216.8888889
977
217.1111111
978
217.3333333
979
217.5555556
980
217.7777778
981
218
982
218.2222222
983
218.4444444
984
218.6666667
985
218.8888889
986
219.1111111
987
219.3333333
988
219.5555556
989
219.7777778
990
220
991
220.2222222
992
220.4444444
993
220.6666667
994
220.8888889
995
221.1111111
996
221.3333333
997
221.5555556
998
221.7777778
999
222
1000
222.2222222
1001
222.4444444
1002
222.6666667
1003
222.8888889
1004
223.1111111
1005
223.3333333
1006
223.5555556
1007
223.7777778
1008
224
1009
224.2222222
1010
224.4444444
1011
224.6666667
1012
224.8888889
1013
225.1111111
1014
225.3333333
1015
225.5555556
1016
225.7777778
1017
226
1018
226.2222222
1019
226.4444444
1020
226.6666667
1021
226.8888889
1022
227.1111111
1023
227.3333333
1024
227.5555556
1025
227.7777778
1026
228
↧