1
2
3
4
5
6
内凹圆角7
8
9
10 .egg{
11 display:block;
12 margin-top:30px;
13 width:100px;
14 height:100px;
15 border-radius:50px;
16 background:radial-gradient(at 35px 35px, #FFF, #CCC, #FFF);
17 background:-webkit-radial-gradient(35px 35px, #FFF, #CCC, #FFF);
18 }
19
20 .something-meaningful{
21 display:inline-block;
22 width:55px;
23 height:55px;
24 overflow:hidden;
25 line-height:130px;
26 background:#655;
27 text-align:center;
28 /*padding: .8em;*/
29 position:relative;
30 float:left;
31 }
32
33 .brdradius{
34 border-top-left-radius:45%;
35 }
36
37 .something-meaningful> div{
38 width:100px;
39 height:100px;
40 background:#fff;
41 border-radius:5em;
42 position:absolute;
43 top:-46px;
44 left:2px;
45 /*padding: 1em;*/
46 }
47
48 .radius{
49 width:50px;
50 height:50px;
51 line-height:100px;
52 display:block;
53 text-align:center;
54 background-image:radial-gradient(200px at 50px 0px, #fff 50px, #4169E1 50px);
55 }
56 .uls{
57 list-style-type:none;
58 *zoom:-1;
59 }
60 .uls:after{
61 content:"";
62 clear:both;
63 display:block;
64 }
65 .uls li{
66 display:block;
67 float:left;
68 width:120px;
69 height:35px;
70 background-color:#4169E1;
71 text-align:center;
72 line-height:35px;
73 color:white;
74 /*做上圆角*/
75 border-top-left-radius:15px;
76 border-top-right-radius:15px;
77 }
78 .li-boradiu{
79 display:inline-block;
80 width:35px;
81 height:35px;
82 /*background-color: #4169E1;*/
83 background-image:radial-gradient(70px at 17.5px 0, #f00);
84 }
85
86
87
88
89
90
1.网上看到的一个很有趣的小案例——用radial-gradient制作立体质感圆球。
91
92
93
94
95
2.如下是一种用一个圆和一个方形盒子叠加做出的内凹圆角的的效果。
96