正文
css3画四分一圆 css画一个圆
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
css3画矩形,矩形里面有多个圆圈,圆圈里面有字,如何实现?
首先你先定一个矩形区域，让这个区域的边框用border:像素 颜色 值；给边框四周上个颜色；
然后再次在这个矩形区域里面定义一个或者多个区域，同样给边框上个颜色，然后用border-radius:50%；这样就会让此矩形区域变换为圆形，依次在里面添加一个或者多个即可；
最后在你定义的圆形区域里面打上文字，如果那里不合适，用css控制一下区域或者文字；
希望我的回答能帮到你；
相关问答
Q1: 如何用css3绘制一个圆的loading转圈动画
具体css代码如下:
$width: 64px;
$height: 64px;
$dotWidth: 10px;
$dotHeight: 10px;
$radius: 5px;
$offset: 9.37px;
@function getLeft( $x ) {
@return ($width/4)*$x;
}
@function getTop( $y ) {
@return ($height/4)*$y;
}
@keyframes changeOpacity {
from { opacity: 1; }
to { opacity: .2; }
}
.q-loading {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
.q-loading-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(255, 255, 255, .5);
}
.q-loading-content {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: $width;
height: $height;
z-index: 2;
}
.dot {
width: 10px;
height: 10px;
position: absolute;
background-color: #0033cc;
border-radius: 50% 50%;
opacity: 1;
animation: changeOpacity 1.04s ease infinite;
}
.dot1 {
left: 0;
top: 50%;
margin-top: -$radius;
animation-delay: 0.13s;
}
.dot2 {
left: $offset;
top: $offset;
animation-delay: 0.26s;
}
.dot3 {
left: 50%;
top: 0;
margin-left: -$radius;
animation-delay: 0.39s;
}
.dot4 {
top: $offset;
right: $offset;
animation-delay: 0.52s;
}
.dot5 {
right: 0;
top: 50%;
margin-top: -$radius;
animation-delay: 0.65s;
}
.dot6 {
right: $offset;
bottom: $offset;
animation-delay: 0.78s;
}
.dot7 {
bottom: 0;
left: 50%;
margin-left: -$radius;
animation-delay: 0.91s;
}
.dot8 {
bottom: $offset;
left: $offset;
animation-delay: 1.04s;
}
}
代码使用scss定义了大圆和小圆圈的半径，不管改成多大只需要更改变量，下面样式无需改变。
Q2: 如何使用css3实现一个圆形菜单
方法1： 用Css实现 css菜单显示效果 /** *菜单的构造,需要绑定到onload */ startList = function() { if (document.alldocument.getElementById) { navRoot = document.getElementById("nav"); for (i=0; i
css3画四分一圆的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于css画一个圆、css3画四分一圆的信息别忘了在本站进行查找喔。
