資訊專欄INFORMATION COLUMN
摘要：譯用剪切圓形圖片在這個教程，我們會介紹一下使用技巧來渲染出圓形的通過設置標簽的所有的屬性為正方形寬高的，我們就可以把這個標簽變成圓的。長方形圖片長方形圖片會稍微有一點技巧一點?；仡欉@個技巧最好適用于正方形的標簽，主題正好位于圖片的中心。
<譯>用CSS剪切圓形圖片
在這個教程，我們會介紹一下使用CSS技巧來渲染出圓形的
CSS
.circular--squareP{
border-radius:50%;
}
通過設置img標簽的所有的border-radius屬性為正方形寬/高的50%，我們就可以把這個img標簽變成圓的。
長方形圖片長方形圖片會稍微有一點技巧一點。
去渲染一個圓形，必須以圓形圖片為基礎
要解決這個問題，我們可以通過在img標簽外面套一層div，然后我們通過將超過這個外層div的img標簽的內(nèi)容給裁掉來實現(xiàn)。具體的話可以通過將外層div的overflow屬性設置為hidden。
為了能夠讓照片的主題不要被裁掉，我們必須要區(qū)別對待水平和垂直方向的圖片。
水平方向的圖片HTML
CSS
.circular--landscape{
display:inline-block;
position:relative;
width:200px;
height:200px;
overflow:hidden;
border-radius:50%;
}
.circular--landscape img{
width:auto;
height:100%;
margin-left:-50%;
}
高度和寬度屬性必須要保持一樣來確保這個div（.circular--landscape）能夠作為正方形渲染起來
除此之外，高度和寬度屬性必須要等于或者小于img的高度。這能夠確保img元素能夠占滿外層div而不會多出一部分空白
一般來說，水平方向圖片的主題（但不一定）會位于圖片的中心位置。為了能夠讓我們盡量不會把圖片的主題裁剪啦，我們可以通過把圖片往左移來彌補圖片剪切的內(nèi)容有點偏右的問題。
我們移動img標簽的大小是外層div的25%，在這個例子中就是向左50px，我們可以通過設置margin-left的屬性來完成設置
margin-left:-50px;
圖片的主題會接近圖片的水平方向中心的假設并不一定是對的，最好在你選擇使用這個技巧的使用把這個假設記住。
垂直方向的圖片HTML
CSS
.circular--portrait{
position:relative;
width:200px;
height:200px;
overflow:hidden;
border-radius:50%;
}
.circular--portrait img{
width:100%;
height:auto;
}
對于垂直方向上的圖片的主題在垂直方向的中心的假設當然也不適用于每一個垂直方向上的圖片。
和水平方向的圖片類似，外層div的寬度和高度最好等于垂直方向圖片你的寬度，這樣的話可以產(chǎn)生最好的效果。
對于垂直方向的圖片，我們把寬度設置為100%，高度設置為auto（和水平方向的圖片相反）
我們不需要移動這個img元素，因為這張照片的主題就在上方中心位置。
回顧這個技巧最好適用于正方形的img標簽，主題正好位于圖片的中心。但是，我們的世界并不是那么完美的，所有如果需求是這樣，我們就可以使用div來把長方形img標簽變圓。
CSS中用來負責把圖片變圓的屬性是border-radius，把邊的圓角變成高度/寬度的50%就可以產(chǎn)生一個圓。
原文鏈接：circular-images-css
文章版權歸作者所有，未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉載請注明本文地址：http://www.ezyhdfw.cn/yun/111191.html
摘要：通過結合使用和遮罩技術，你將會擁有更多的可能性去使用網(wǎng)絡圖像。在圖像上應用遮罩元素為了使用得到一種感覺，我們將在圖像上使用遮罩。瀏覽器支持在我們使用這種新的處理圖像的方法之前，注意到瀏覽器對剪切和遮罩的支持不一致是非常重要的。 本文轉載自：眾成翻譯譯者：hidoos鏈接：http://www.zcfy.cc/article/1100原文：https://getflywheel.com/...
摘要：正是因為沒有很好地了解負邊距才是導致各種奇怪的問題。不理解它負邊距不會在的設計窗口展示出效果。有兩種場景負邊距是很重要的。微調(diào)元素這是負外邊距最常也是最簡單的使用方式。 原文 The Definitive Guide to Using Negative Margins 自從1998年CSS2作為推薦以來，表格的使用漸漸退去，成為歷史。正因為此，從那以后CSS布局成為了優(yōu)雅代碼的代名詞。...
摘要：創(chuàng)建剪切動畫對于剪切動畫，使用代替，避免重排導致性能過低。其中屬于萬金油，大多數(shù)場景可以直接用它，但還是有些特殊的場景不能用子元素需要文字截斷，為了兼容的瀏覽器，必須使用其他方式一般是子元素需要多行布局，的不支持，不能多行布局 創(chuàng)建剪切動畫 對于剪切動畫，使用clip-path代替width/height，避免DOM重排導致性能過低。 .animate { width: 200px...
閱讀 2747·2021-11-02 14:39
閱讀 4491·2021-10-11 10:58
閱讀 1734·2021-09-06 15:12
閱讀 2050·2021-09-01 10:49
閱讀 1470·2019-08-29 18:31
閱讀 2019·2019-08-29 16:10
閱讀 3491·2019-08-28 18:21
閱讀 1013·2019-08-26 10:42
