CSS3流体电弧&x2B；一些文本
有没有一种方法可以使这种东西流动起来，这样它就可以和它的母体一起伸缩，或者，需要什么来实现它CSS3流体电弧&x2B；一些文本,css,Css,有没有一种方法可以使这种东西流动起来，这样它就可以和它的母体一起伸缩，或者，需要什么来实现它 <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title>Demo</title> <style type="text/css">
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Demo</title>
<style type="text/css">
#circle-container {
position: relative;
width: 200px;
height: 200px;
border: solid 0px #333;
}
.dimmensions {
width: 100px;
height: 100px;
}
.dimmensions2 {
width: 113px;
height: 113px;
}
.dimmensions3 {
width: 105px;
height: 105px;
}
.left {
position: relative;
border-top-left-radius: 100px;
border-bottom-left-radius: 100px;
background: #09f;
float: left;
height: 199.5px;
top: 0;
}
.left-inner {
position: relative;
border-top-left-radius: 100px;
border-bottom-left-radius: 100px;
background: #444;
height: 175px;
width: 90px;
top: 12px;
left: 15px;
}
.left-inner-small {
position: relative;
border-top-left-radius: 100px;
border-bottom-left-radius: 100px;
background: #4cff00;
height: 145px;
width: 85px;
top: 15px;
left: 15px;
}
.top-right {
position: relative;
border-top-right-radius: 100px;
background: #666;
float: right;
}
.top-right-inner {
position: relative;
border-top-right-radius: 100px;
background: #ffd800;
float: right;
height: 90px;
width: 85px;
top: 12px;
right: 15px;
}
.top-right-inner-small {
position: relative;
border-top-right-radius: 100px;
background: #808080;
float: right;
height: 75px;
width: 70px;
top: 15px;
right: 15px;
}
.bottom-right {
position: relative;
border-bottom-right-radius: 100px;
background: #333;
float: right;
}
.bottom-right-inner {
position: relative;
border-bottom-right-radius: 100px;
background: #ff6a00;
float: right;
height: 87px;
width: 85px;
top: 0px;
right: 15px;
}
.bottom-right-inner-small {
position: relative;
border-bottom-right-radius: 100px;
background: #fff;
float: right;
height: 72px;
width: 70px;
top: 0px;
right: 15px;
}
.center-small {
position: absolute;
border-radius: 125px;
background: #ff6a36;
top: 44px;
left: 44px;
z-index: 999;
}
.center-small-inner {
position: absolute;
border-radius: 125px;
background: #333;
top: 4px;
left: 4px;
z-index: 9999;
}
.center-text {
z-index: 99999;
position: absolute;
text-shadow: #000 0px 2px 1px;
color: #555;
font-size: 18px;
top: -12px;
left: -47px;
font-family: 'Impact';
text-transform: uppercase;
}
</style>
</head>
<body>
<div id="circle-container">
<div class="dimmensions2 center-small">
<div class="dimmensions3 center-small-inner"></div>
</div>
<div class="dimmensions left">
<div class="dimmensions left-inner">
<div class="dimmensions left-inner-small"></div>
</div>
</div>
<div class="dimmensions top-right">
<div class="dimmensions top-right-inner">
<div class="dimmensions top-right-inner-small"></div>
</div>
</div>
<div class="dimmensions bottom-right">
<div class="dimmensions bottom-right-inner">
<div class="dimmensions bottom-right-inner-small">
<span class="center-text">
CSS3<span style="color:#ffd800">+</span>HTML5
</span>
</div>
</div>
</div>
</div>
</body>
</html>
演示
#圆形容器{
位置：相对位置；
宽度：200px；
高度：200px；
边框：实心0px#333；
}
D.迪明森{
宽度：100px；
高度：100px；
}
.Dimmensions 2{
宽度：113px；
高度：113px；
}
.3{
宽度：105px；
高度：105px；
}
.左{
位置：相对位置；
边框左上半径：100px；
边框左下半径：100px；
背景：#09f；
浮动：左；
身高：199.5px；
排名：0；
}
.左内{
位置：相对位置；
边框左上半径：100px；
边框左下半径：100px；
背景：#444；
高度：175px；
宽度：90px；
顶部：12px；
左：15px；
}
.左内小{
位置：相对位置；
边框左上半径：100px；
边框左下半径：100px；
背景#4cf00；
高度：145px；
宽度：85px；
顶部：15px；
左：15px；
}
.右上角{
位置：相对位置；
边框右上角半径：100px；
背景:#666；
浮动：对；
}
.右上角内侧{
位置：相对位置；
边框右上角半径：100px；
背景：#ffd800；
浮动：对；
高度：90px；
宽度：85px；
顶部：12px；
右：15px；
}
.右上角内部小{
位置：相对位置；
边框右上角半径：100px；
背景#8080；
浮动：对；
高度：75px；
宽度：70px；
顶部：15px；
右：15px；
}
.右下角{
位置：相对位置；
边框右下半径：100px；
背景：#333；
浮动：对；
}
.右下内侧{
位置：相对位置；
边框右下半径：100px；
背景：#ff6a00；
浮动：对；
高度：87px；
宽度：85px；
顶部：0px；
右：15px；
}
.右下内侧小{
位置：相对位置；
边框右下半径：100px；
背景：#fff；
浮动：对；
高度：72px；
宽度：70px；
顶部：0px；
右：15px；
}
.中小型{
位置：绝对位置；
边界半径：125px；
背景：#ff6a36；
顶部：44px；
左：44px；
z指数：999；
}
.中心小内{
位置：绝对位置；
边界半径：125px；
背景：#333；
顶部：4px；
左：4px；
z指数：9999；
}
.居中文本{
z指数：99999；
位置：绝对位置；
文本阴影：#000 0px 2px 1px；
颜色：#555；
字号：18px；
顶部：-12px；
左：-47px；
字体系列：“影响”；
文本转换：大写；
}
CSS3+HTML5
#圆圈容器#圆形容器的宽度和高度的实际200px
，并将其更改为百分比结果
例如：
#circle-container {
position: relative;
width: 200px;
height: 200px;
border: solid 0px #333;
}
.dimmensions {
width: 100px;
height: 100px;
}
将变成：
#circle-container {
position: relative;
width: 200px;
height: 200px;
border: solid 0px #333;
}
.dimmensions {
width: 50%; //Proportional
height: 50%; //Proportional
}
然后，调整圆容器的大小将调整整个圆弧的大小