圖像上的圓角

我想要在圖像頂部的兩個角上的圓角。它在技術上是在那裏，但正在被圖像覆蓋。我瀏覽過所有的網頁，我看到有人談論overflow: hidden;甚至是JavaScript（我想盡可能避免），但我似乎無法將它實現到我現有的代碼片段上。

在此先感謝。

<section class="container"> 
    <header> 
     <img src="http://i.imgur.com/CpL8u.png" style="box-shadow: 0px 0px 10px #888;" /> 
    </header> 
    <section class="body"> 
     Lorem ipsum blahblah I don't know the rest. 
    </section> 
</section>

CSS：

header { 
    width: 640px; 
    margin-left: -10px; 
    margin-top: -10px; 
} 
section.container { 
    background: #fff; 
    width: 620px; 
    margin: auto; 
    -moz-border-radius: 10px; 
    border-radius: 10px; 
    padding: 10px; 
    box-shadow: 0px 0px 20px #888; 
} 
section.body { 
    margin-top:10px; 
}

來源

2012-07-21 Jeremy Ahn

您可以提供有效的圖片。順便說一句，這是** Chrome **中令人討厭的bug，它不會將圖像放在「圓形」容器內。 – 2012-07-21 21:15:14

@ RokoC.Buljan對不起，我的一個朋友還沒有爲我創建一個標題。 – 2012-07-21 21:18:06

將'overflow：hidden;'添加到'section.container' – Stefan 2012-07-21 21:18:07

你需要一個border-radius添加到圖像：http://jsfiddle.net/WouterJ/48Y37/1/

來源

2012-07-21 21:15:31

爲了圓實際的圖像，你必須確保該<img>標籤的類實際上有border-radius屬性。例如：

<img class="roundrect" src="/whatever-your-source-is.png">

和相應的CSS是這樣的：

.roundrect { 
border-radius: 15px; 
}

來源

2012-07-21 22:16:49

-1

複製與截圖工具的圖片，並粘貼到畫圖。
選擇圓角矩形形狀並將顏色更改爲白色。
爲矩形選擇最大尺寸。
然後把圖片周圍的白色圓形邊框。
然後複製和粘貼圓形圖片無論你需要它。

來源

2018-01-12 15:39:21 user9209769

圖像上的圓角

回答

相關問題