將邊框添加到圓形圖像

我在我的網站上添加了一個正常的方形圖像，並將其製作成具有邊框半徑的圓形，然後嘗試在其周圍添加一個圓形邊框，但它似乎只能在Chrome上工作。有關如何解決此問題的任何建議？將邊框添加到圓形圖像

.face { 
display: block; 
margin: auto; 
border-radius: 100%; 
border: 5px solid #ff675b;}

這是問題的一個截圖： https://www.dropbox.com/s/4xy26phkjgz9te0/Screen%20Shot%202013-05-01%20at%2001.15.02.png

來源

2013-05-01 SlightlyClever

我想你應該重新上傳截圖而不是刪除它。 .. – simPod 2013-12-26 00:54:54

http://www.css3.info/preview/rounded-border/

邊界半徑不會在每個瀏覽器的工作方式相同。你需要不同的方法。

來源

2013-05-01 00:25:15

創建一個新的類：

.circleborder { 
width: 300px; 
height: 300px; 
border-radius: 150px; 
-webkit-border-radius: 150px; 
-moz-border-radius: 150px; 
background: url(URL) no-repeat; 
box-shadow: 0 0 8px rgba(0, 0, 0, .8); 
-webkit-box-shadow: 0 0 8px rgba(0, 0, 0, .8); 
-moz-box-shadow: 0 0 8px rgba(0, 0, 0, .8); 
}

，這將是您的html代碼：

<div class="circleborder"><img src="URL"/></div>

來源

2013-05-01 00:26:11

看到這個的jsfiddle

http://jsfiddle.net/z3rLa/1/

.avatar { 
    width:128px; 
    margin: 10px; 
    border:10px solid red; 
    border-radius: 500px; 
    -webkit-border-radius: 500px; 
    -moz-border-radius: 500px; 
}

來源

2013-05-01 00:27:50 Akusete

的HTML：

<div class="circleborder"><img class="face" src="img/face.jpeg" alt="face" width="130" height="130"></div>

CSS：

.face { 
border-radius: 100%;} 

.circleborder { 
border: 5px solid #ff675b; 
border-radius: 100%; 
display: inline-block;}

感謝您的幫助傢伙！我正在測試我們的解決方案，並且在我的Mac和iPhone上使用Chrome & Safari！：D

來源

2013-05-01 01:48:35 SlightlyClever

試試這個，它會幫助你。

.clip-circle { 
     clip-path: circle(60px at center); 
     /* OLD VALUE example: circle(245px, 140px, 50px); */ 
     /* Yep, even the new clip-path has deprecated stuff. */ 
    } 
    .clip-ellipse { 
     clip-path: ellipse(60px 40px at 75px 30px); 
     /* OLD VALUE example: ellipse(245px, 80px, 75px, 30px); */ 
    } 
    .clip-polygon { 
     clip-path: polygon(5% 5%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%); 
     /* Note that percentages work as well as px */ 
    }

來源

2015-01-28 12:03:16

這是我使用的方式：

CSS：

.avatar { 
    display: block; 
    border-radius: 200px; 
    box-sizing: border-box; 
    background-color: #DDD; 
    border: 5px solid #cfd8dc; 
} 

img { 
    height: 200px; 
    width: 200px 
}

HTML：

<img class="avatar" src="..">

來源

2015-09-29 14:02:35 Lebul

將邊框添加到圓形圖像

回答

相關問題