html span圆角,CSS-论css如何纯代码实现内凹圆角

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