HTML5 / CSS3圆圈部分边框(HTML5 / CSS3 Circle with Partia

是否有可能创建一个使用具有边框，只有去绕了一圈部分仅仅HTML5 / CSS3的圆？ 如果没有，我可以用什么技术来实现这种效果呢？ 我宁愿用纯DOM元素，但如果我要，我可以在画布上绘制或旋转起来的SVG。

Answer 1:

是的，这是可能的 - 看到这一点：

演示

 .circle { position: relative; margin: 7em auto; width: 16em; height: 16em; border-radius: 50%; background: lightblue; } .arc { overflow: hidden; position: absolute; /* make sure top & left values are - the width of the border */ /* the bottom right corner is the centre of the parent circle */ top: -1em; right: 50%; bottom: 50%; left: -1em; /* the transform origin is the bottom right corner */ transform-origin: 100% 100%; /* rotate by any angle */ /* the skew angle is 90deg - the angle you want for the arc */ transform: rotate(45deg) skewX(30deg); } .arc:before { box-sizing: border-box; display: block; border: solid 1em navy; width: 200%; height: 200%; border-radius: 50%; transform: skewX(-30deg); content: ''; } 

 <div class='circle'> <div class='arc'></div> </div> 

Answer 2:

这是可能的。

• 用画两个圈border-radius一个在另一个上面。
• 让两个圆的一个或多个弧形transparent ，通过改变border-color 。
• 使用transform旋转二圈，你将有你需要的大小的弧线。

以下是演示 ： http://jsfiddle.net/kJXwZ/2/

 .wrapper { position: relative; margin: 20px; } .arc { position: absolute; top: 0; left: 0; width: 100px; height: 100px; border-radius: 100%; border: 1px solid; } .arc_start { border-color: transparent red red red; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); } .arc_end { border-color: red red red transparent; -webkit-transform: rotate(75deg); -moz-transform: rotate(75deg); -ms-transform: rotate(75deg); -o-transform: rotate(75deg); transform: rotate(75deg); } 

 <div class="wrapper"> <div class="arc arc_start"></div> <div class="arc arc_end"></div> </div> 

Answer 3:

这使用JavaScript一样，所以它从原来的需求打破了:(
..但它确实提供

有一个>> 演示 <<点击这里

@gkond谢谢，我得到的这个从你的答案

 // create a circle using HTML5 / CSS3 / JS which has a border that only goes part-way around // the circle .. and which can be smoothly animated from 0% to 100% around the circle // this solution allows for animation and still results in relatively clean code // we use four quarter-circles, all hidden away behind a white square to start with.. // all four are rotated out clockwise, and each quarter will stop at it's own maximum: // q1 at 25%, q2 at 50% .. etc. once we reach a value at or over 25%, all four quarters // should be out from behind the white square, and we can hide it.. it needs to be // hidden if we display a value over 75%, or else q4 will end up going in behind it again // .. also, since the top border will usually sit between the angles of -45 to 45, we // rotate everything by an extra -45 to make it all line up with the top nicely var fromHidden = -90; // utility funciton to align 0 degrees with top // takes degrees and returns degrees - 45 function topAlign(degrees) { return degrees - 45 }; // utility function to rotate a jQuery element // takes element and the degree of rotation (from the top) function rotate(el, degrees) { var degrees = topAlign(degrees || 0); el.css( 'transform', 'rotate(' + degrees + 'deg)', '-webkit-transform', 'rotate(' + degrees + 'deg)', '-moz-transform', 'rotate(' + degrees + 'deg)', '-ms-transform', 'rotate(' + degrees + 'deg)', '-o-transform', 'rotate(' + degrees + 'deg)' ) } // function to draw semi-circle // takes a jQuery element and a value (between 0 and 1) // element must contain four .arc_q elements function circle(el, normalisedValue) { var degrees = normalisedValue * 360; // turn normalised value into degrees var counter = 1; // keeps track of which quarter we're working with el.find('.arc_q').each(function() { // loop over quarters.. var angle = Math.min(counter * 90, degrees); // limit angle to maximum allowed for this quarter rotate($(this), fromHidden + angle); // rotate from the hiding place counter++; // track which quarter we'll be working with in next pass over loop }); if (degrees > 90) { // hide the cover-up square soon as we can el.find('.arc_cover').css('display', 'none'); } } // uses the the circle function to 'animate' drawing of the semi-circle // incrementally increses the value passed by 0.01 up to the value required function animate(el, normalisedValue, current) { var current = current || 0; circle(el, current); if (current < normalisedValue) { current += 0.01; setTimeout(function() { animate(el, normalisedValue, current); }, 1); } } // kick things off .. animate($('.circle'), 0.69); 

 .circle { position: relative; margin: 20px; width: 120px; height: 120px; } .arc_q { position: absolute; top: 0; left: 0; width: 100px; height: 100px; border-radius: 50%; border: 10px solid; border-color: transparent green transparent transparent; transform: rotate(-45deg); -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); } .arc_cover { position: absolute; top: 0; left: 0; width: 60px; height: 60px; background-color: white; } 

 <div class="circle"> <div class="arc_q"></div> <div class="arc_q"></div> <div class="arc_q"></div> <div class="arc_q"></div> <div class="arc_cover"></div> </div> 

Answer 4:

要做到这一点，你可以使用简单的框的边框属性，一个元素，一个班。 这将是一个内联，内联块或阻滞治疗，这取决于你的地方你很容易圈类，以及如何/如果你的风格定位。

<!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>

Answer 5:

这是可以实现设置围绕透明圈的透明边界和使用border-top-color: ; 给予部分的圆圈边缘色。

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

这将创建只有约前1/4边界的圈子;

您还可以使用

border-bottom-color:green;

以及左，右边境的圆圈周长的不同的宿舍。

下面是用于与在该操作中显示此交替的方向内彼此旋转3个部分圆装载机小提琴。

下面是用于与在该操作中显示此交替的方向内彼此旋转3个部分圆装载机小提琴。

Answer 6:

动画这种简单的方法是使用CSS关键帧。

http://jsfiddle.net/8SUPX/644/

 /** * HTML5 / CSS3 Circle with Partial Border * http://stackoverflow.com/q/13059190/1397351 */ * { margin: 0; padding: 0; } .circle { position: relative; margin: 6em auto; width: 12em; height: 12em; border-radius: 50%; background: transparent; border:20px solid #efefef; border-top-color: #efefef; border-right-color: #efefef; border-bottom-color: #efefef; border-left-color: #efefef; -webkit-transition:.5s;-moz-transition:.5s;transition:.5s; } .circle:hover{ -webkit-animation: animix 0.5s 1; -webkit-animation-fill-mode: forwards; -moz-animation: animix 0.5s 1; -moz-animation-fill-mode: forwards; animation: animix 0.5s 1; animation-fill-mode: forwards; } //Animate @-webkit-keyframes animix { 0% { border-top-color: transparent; border-right-color: transparent; border-bottom-color: transparent; border-left-color: transparent; } 25% { border-top-color: red; border-right-color: transparent; border-bottom-color: transparent; border-left-color: transparent; } 50% { border-top-color: red; border-right-color: red; border-bottom-color: transparent; border-left-color: transparent; } 75% { border-top-color: red; border-right-color: red; border-bottom-color: red; border-left-color: transparent; } 100% { border-top-color: red; border-right-color: red; border-bottom-color: red; border-left-color: red; } } @keyframes animix { 0% { border-top-color: transparent; border-right-color: transparent; border-bottom-color: transparent; border-left-color: transparent; } 25% { border-top-color: red; border-right-color: transparent; border-bottom-color: transparent; border-left-color: transparent; } 50% { border-top-color: red; border-right-color: red; border-bottom-color: transparent; border-left-color: transparent; } 75% { border-top-color: red; border-right-color: red; border-bottom-color: red; border-left-color: transparent; } 100% { border-top-color: red; border-right-color: red; border-bottom-color: red; border-left-color: red; } } 

 <div class="circle"> </div> 

文章来源: HTML5 / CSS3 Circle with Partial Border