时间戳

首页 > 解决方案 > 如何用百分比条制作边框

html - 如何用百分比条制作边框

问题描述

我什至不知道如何描述它，所以这是图片。 是的，类似的东西。我的意思是圆形边框，但好像只有一部分是红色的。另外，我不希望它被动画或任何东西，所以是否可以只用 CSS 和 HTML 制作它，而不用 JavaScript？
很想在这里得到一些帮助！

标签： htmlcssimageborder

解决方案

我认为这可以帮助你。

    <!DOCTYPE html>
    <html>
    <head>
    <title></title>
    <style type="text/css">
    body{
    background:yellow;
    }
    .image{
    height:100px;
    width:100px;
    margin:auto;
    border-radius:50%;
    border:10px solid red;
    border-left:10px solid transparent;
    padding:15px;
    transform:rotate(45deg);
    }
    img{
    width:100%;
    height:100%;
    border-radius:50%;
    transform:rotate(-45deg);
    }
    </style>
    </head>
    <body>
    <div class="image" >
    <img src="img.jpg" />
    </div>
    </body>
    </html>

推荐阅读