HTML5/CSS3带部分边框的圆圈_Html_Css_Border_Css Shapes

HTML5/CSS3带部分边框的圆圈

html css

HTML5/CSS3带部分边框的圆圈,html,css,border,css-shapes,Html,Css,Border,Css Shapes,是否可以只使用HTML5/CSS3创建一个只有一部分边界的圆？如果没有，我可以使用什么技术来实现这种效果？我更喜欢使用纯DOM元素，但如果有必要，我可以在画布上绘制或旋转SVG。是的，这是可能的-请参见以下内容： .circle{ 位置：相对位置；保证金：7em自动；宽度：16em；高度：16em；边界半径：50%；背景：浅蓝色； } .arc{ 溢出：隐藏；位置：绝对位置； /*确保顶部和左侧的值为-边框的宽度*/ /*右下角是父圆的中心*/ 顶部：-1米；右：50%；底部：

是否可以只使用HTML5/CSS3创建一个只有一部分边界的圆？如果没有，我可以使用什么技术来实现这种效果？我更喜欢使用纯DOM元素，但如果有必要，我可以在画布上绘制或旋转SVG。

是的，这是可能的-请参见以下内容：

.circle{
位置：相对位置；
保证金：7em自动；
宽度：16em；
高度：16em；
边界半径：50%；
背景：浅蓝色；
}
.arc{
溢出：隐藏；
位置：绝对位置；
/*确保顶部和左侧的值为-边框的宽度*/
/*右下角是父圆的中心*/
顶部：-1米；
右：50%；
底部：50%；
左：-1米；
/*变换原点位于右下角*/
变换原点：100%100%；
/*旋转任意角度*/
/*倾斜角度为90度-圆弧所需的角度*/
变换：旋转（45度）斜交（30度）；
}
.弧：以前{
框大小：边框框；
显示：块；
边界：坚固的1米海军；
宽度：200%；
身高：200%；
边界半径：50%；
变换：斜X（-30度）；
内容：''；
}

这是可能的

使用
```
边界半径
```
一个接一个地画两个圆
通过更改
```
边框颜色
```
，使两个圆的一个或多个圆弧透明
使用
```
transform
```
旋转第二个圆，您将获得所需大小的圆弧

以下是演示：

.wrapper{
位置：相对位置；
利润率：20px；
}
.arc{
位置：绝对位置；
排名：0；
左：0；
宽度：100px；
高度：100px；
边界半径：100%；
边框：1px实心；
}
.arc_开始{
边框颜色：透明红色；
-webkit变换：旋转（45度）；
-moz变换：旋转（45度）；
-ms变换：旋转（45度）；
-o变换：旋转（45度）；
变换：旋转（45度）；
}
.弧尾{
边框颜色：红色透明；
-webkit变换：旋转（75度）；
-moz变换：旋转（75度）；
-ms变换：旋转（75度）；
-o变换：旋转（75度）；
变换：旋转（75度）；
}

这也使用JavaScript，因此它打破了最初的要求：（
…但它确实提供了

要做到这一点，您可以使用简单的方框边框属性、一个元素和一个类。这将是一种内联、内联块或块处理，具体取决于您放置easy circle类的位置以及设置位置样式的方式/方式

<!DOCTYPE html>
<html>
<head>
<style>
.easy-circle {
    background: transparent;
    border: 1em solid black; /* color not required, may show device fail */
    border-color: red green blue transparent;
    height: 10em;
    width: 10em;
    -moz-border-radius: 6em; /* height/2 + border thickness */
    -webkit-border-radius: 6em;
    border-radius: 50%; /* more than 50, shape-size adjustment irrelevant */
    -ms-transform: rotate(45deg); /* IE 9 */
    -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
     transform: rotate(45deg); /* transform optional */
}
</style>
</head>
<body>
<div class="easy-circle">
</div>
</body>
</html>


.轻松圈{
背景：透明；
边框：1em纯黑色；/*不需要颜色，可能显示设备故障*/
边框颜色：红绿蓝透明；
高度：10公分；
宽度：10em；
-moz边框半径：6em；/*高度/2+边框厚度*/
-webkit边界半径：6em；
边框半径：50%；/*大于50，形状尺寸调整无关*/
-ms变换：旋转（45度）；/*IE 9*/
-webkit变换：旋转（45度）；/*铬合金、Safari、Opera*/
变换：旋转（45度）；/*变换可选*/
}

制作动画的最简单方法是使用css关键帧

/**
*HTML5/CSS3带部分边框的圆圈
* http://stackoverflow.com/q/13059190/1397351
*/
*{边距：0；填充：0；}
.圆圈{
位置：相对位置；
保证金：6em自动；
宽度：12em；高度：12em；
边界半径：50%；
背景：透明；
边框：20px实心#efef；
边框顶部颜色：#efefef；
右边框颜色：#efefef；
边框底色：#efefef；
左边框颜色：#efefef；
-webkit转换：.5s；-moz转换：.5s；转换：.5s；
}
.圆圈：悬停{
-webkit动画：animix0.5s1；
-webkit动画填充模式：正向；
-moz动画：animix0.5s1；
-moz动画填充模式：正向；
动画：动画0.5s1；
动画填充模式：正向；
}
//生动活泼
@-webkit关键帧动画{
0% { 
边框顶色：透明；
右边框颜色：透明；
边框底色：透明；
左边框颜色：透明；
}
25% { 
边框顶部颜色：红色；
右边框颜色：透明；
边框底色：透明；
左边框颜色：透明；
}
50% { 
边框顶部颜色：红色；
右边框颜色：红色；
边框底色：透明；
左边框颜色：透明；
}
75% { 
边框顶部颜色：红色；
右边框颜色：红色；
边框底色：红色；
左边框颜色：透明；
}
100% { 
边框顶部颜色：红色；
右边框颜色：红色；
边框底色：红色；
左边框颜色：红色；
}
}
@动画关键帧{
0% { 
边框顶色：透明；
右边框颜色：透明；
边框底色：透明；
左边框颜色：透明；
}
25% { 
边框顶部颜色：红色；
右边框颜色：透明；
边框底色：透明；
左边框颜色：透明；
}
50% { 
边框顶部颜色：红色；
右边框颜色：红色；
边框底色：透明；
左边框颜色：透明；
}
75% { 
边框顶部颜色：红色；
右边框颜色：红色；
边框底色：红色；
左边框颜色：透明；
}
100% { 
边框顶部颜色：红色；
右边框颜色：红色；
边框底色：红色；
左边框颜色：红色；
}
}

可以在透明圆周围设置透明边框，并使用

边框顶部颜色：；

为圆的一部分边框指定颜色

background-color:transparent;
border:3px solid transparent;
border-top-color: green;

这将创建一个仅在顶部四分之一周围有边框的圆

你也可以使用

border-bottom-color:green;

以及左右边界不同四分之一圆的周长