在CSS3中爲圖像舍入旋轉邊框

Question

是否可以在CSS3中舍入旋轉邊框。我想在這裏處理像附加圖像的圖像。

你會怎麼做？謝謝！！

Answer 1

是的，這是可能的。

首先，您需要使用Photoshop或Paint.Net等圖形工具先將圖片旋轉至您喜歡的度數，例如45度。 接下來，您將創建一個圓角矩形，並使用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; 

     } 

希望這有助於它旋轉。

Answer 2

解決它像這樣由於全勝阮回答

<div class="image-rounded"> 
    <img src="image.jpg" alt="image" /> 
</div> 

.image-rounded{ 
    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; 
} 

.image-rounded img{ 
    -webkit-transform: rotate(-45deg); 
    -moz-transform: rotate(-45deg); 
    -ms-transform: rotate(-45deg); 
    -o-transform: rotate(-45deg); 
    transform: rotate(-45deg); 
    width: 200px; 
    margin-top: -25px; 
    margin-left: -25px; 
}