css - CSS3中图像的圆形旋转边框

Question

是否可以在 CSS3 中使用圆形旋转边框。我想像这里的附件一样处理我的图像。

你会怎么做？谢谢!!

Answer 1

是的，这是可能的。

首先，您需要先使用 Photoshop 或 Paint.Net 等图形工具将图像旋转到您喜欢的 Angular ，例如 45 度。接下来，您将创建一个圆 Angular 矩形并像这样使用 CSS 旋转它

<div class="roundedBox">

    </div>


    .roundedBox
        {
            margin: 50px;
            width: 150px;
            height: 150px;
            border: 3px solid blue;
            -ms-border-radius: 10px;
            border-radius: 30px;
            -webkit-transform: rotate(45deg);
            -moz-transform: rotate(45deg);
            -ms-transform: rotate(45deg);
            -o-transform: rotate(45deg);
            transform: rotate(45deg);
            overflow: hidden;

        }

希望这对您有所帮助。