如何在不更改其他圖像的情況下更改側欄圖像的邊框半徑？

我剛放置的圖像在我的主網頁的「關於我」欄目，我不能夠改變圖像的邊界半徑沒有所有的其他圖像變化以及..如何在不更改其他圖像的情況下更改側欄圖像的邊框半徑？

CSS：

.well .col-lg-12 .about, img { 
    border-radius: 50%; 
}

HTML：

<div class="well"> 
<div class="row"> 
    <div class="col-lg-12"> 
    <img class="about" src= "https://storage.googleapis.com/simply-sturgis-website-files/Untitled.jpg" style="width:230px"></img> 
    <h3>Hello! I'm Jennifer.</h3> 
    <p>I'm a part time marketing assistant, part time blogger, who loves food, beauty, and fashion. But what 23 year old doesn't?!</p> 
    <a href="#">Read More</a> 
    </div> 
</div>

Demo

這是我目前擁有的代碼的結果：

來源

2016-01-11 Jennifer Sturgis

僅更改要更改圖像的類的邊框半徑。 –

如果樣式對於一個圖像是唯一的，則給它一個「id」並相應地設置樣式。 –

選擇器中的逗號是問題;它說要定位所有圖像。如果你想要那個特定的圖像，你的選擇器應該是'.well .col-lg-12 img.about' – sbeliv01

幾件事情不對，你應該考慮。

不要風格ID - ID不能級聯，它們是唯一的。這意味着如果你想分享你的風格，你不能因爲你將它附加到一個ID而不是你可以重用的類。

例如：您不能有兩個DIVs ID about。但是，如果你想要DIVs以相同的方式行事，現在你將不得不爲DIVs重複CSS規則。相反，您可以創建一個myClass，設置它的樣式，然後儘可能多地重複該類。 ---可擴展性&可維護性

請勿風格自舉類 - 一些自舉類，特別是col-*類，不應該被稱呼或在你的特異性考慮。這會產生問題，因爲只有您想要的樣式爲col-lg-12時，您的樣式纔會起作用。如果您決定更改班級以使其反應，您的特異性會失敗。相反，級聯自定義類並將其用作特定的鉤子。

例如，你設計了你的特異性.col-lg-3 .myClass{something}但後來決定col-lg-3太大了。所以你把它改成col-lg-2。現在你必須去CSS，並改變這種特殊性到.col-lg-2 .myClass{something} ...雙工。如果你離開引導類出來的，你只改變HTML架構，沒有別的

這是，如果我是你，我會做什麼：

<div class="col-lg-12 myClass"> 
    <img class="about" src= "https://storage.googleapis.com/simply-sturgis-website-files/Untitled.jpg" style="width:230px"></img> 
    <h3>Hello! I'm Jennifer.</h3> 
    <p>I'm a part time marketing assistant, part time blogger, who loves food, beauty, and fashion. But what 23 year old doesn't?!</p> 
    <a href="#">Read More</a> 
    </div>

而且你的CSS

.myClass img.about { 
    border-radius: 50%; 
}

DEMO

來源

2016-01-11 20:59:57 LOTUSMS

謝謝！你會如何將它集中在div中？ –

還記得我推薦的自定義類嗎？這樣做：.myClass {text-align：center;} ...導入自定義類的另一個原因。您可以使用該類作爲鉤子（父類））來處理該元素中的所有特性 – LOTUSMS

我編輯了我的DEMO，顯示了居中 – LOTUSMS

-1

給圖像ID標籤，只需使用該ID在CSS。這樣一來，你只能要定位到特定的圖像，而不是其他：

https://jsfiddle.net/32nydcjw/

HTML：

<!-- About Me Well --> 
    <div class="well"> 
    <div class="row"> 
     <div class="col-lg-12"> 
     <img id="aboutMeImg" src= "https://storage.googleapis.com/simply-sturgis-website-files/Untitled.jpg" style="width:230px"></img> 
     <h3>Hello! I'm Jennifer.</h3> 
     <p>I'm a part time marketing assistant, part time blogger, who loves food, beauty, and fashion. But what 23 year old doesn't?!</p> 
     <a href="#">Read More</a> 
     </div> 
    </div> 
    </div>

CSS：

#aboutMeImg { 
    border-radius: 50%; 
}

來源

2016-01-11 20:55:06 bnned

如何在不更改其他圖像的情況下更改側欄圖像的邊框半徑？

回答

相關問題