我正在尋找添加「外」圓角到選定的側邊欄項目，以使這個項目「傾注」到內容中的效果。如何將外圓角加到div上？

在下面的示例中，我想.top有一個帶灰色背景的圓角右下角以及.bottom的右上角。你怎麼看？

我正在使用Twitter Bootstrap和LESS，如果這樣做會更容易一些。

打開本：

rendered

進入這個：

enter image description here

標記：

<div class="wrapper"> 
    <div class="sidebar"> 
     <div class="top"> 
      <p>Top</p> 
     </div> 
     <div class="middle"> 
      <p>Middle</p> 
     </div> 
     <div class="bottom"> 
      <p>Bottom</p> 
     </div> 
    </div> 
    <div class="container"> 
     <p>Content</p> 
    </div> 
</div>

CSS：

body { 
    margin:10px; 
} 
div { 
    margin:0; 
    margin-right:-4px; 
    padding:0; 
    display:inline-block; 
    vertical-align:middle; 
} 
.wrapper { 
    width:100%; 
    display:block; 
    border:1px solid; 
} 
.container { 
    background-color:gray; 
    width:70%; 
    height:300px; 
} 
.sidebar { 
    background-color:white; 
    width:30%; 
    height:300px; 
} 
.middle { 
    background-color:gray; 
} 
.top,.middle,.bottom { 
    width:100%; 
    height:100px; 
    display:block; 
} 
p { 
    padding:40px 0 0; 
    margin:0; 
    text-align:center; 
}

來源

2013-04-24 Ryan

Css3提供border-radius屬性。但是，請注意，這不適用於IE8或更低版本。有可用的黑客;但他們只是：黑客。

用法是這樣的：

.sidebar { 
     background-color:gray; 
     width:30%; 
     height:300px; 
    } 
    .middle { 
     background-color:gray; 
    } 
    .top,.middle,.bottom { 
     width:100%; 
     height:100px; 
     display:block; 
    } 
    .top{ 
     background: white; 
     border-bottom-right-radius:10px; 
    } 
    .bottom{   
     background: white; 
     border-top-right-radius: 10px; 
    }

jsFiddle example

來源

2013-04-24 01:04:15

是的，我一直在玩'.border-top-right-radius（10px）;'mixin in bootstrap，但我無法弄清楚如何使「空」角的背景與'相同。中間'在我的例子。 – Ryan 2013-04-24 01:07:39

@Ryan你只需要在所有內容後面放一個包裝 - 讓我試着用你的代碼給你一個例子。 – 2013-04-24 01:10:46

更新與圖像的帖子，使其更清晰。 – Ryan 2013-04-24 01:14:33

你可以使用CSS的邊界半徑。你可以在這裏看到一個在線圓形邊界生成器： http://border-radius.com/

來源

2013-04-24 01:01:44 beebee

但是，如何選擇角落的背景顏色？ – Ryan 2013-04-24 01:05:33

我不確定你的意思是在角落的背景。如果您希望可以通過box-shadow屬性放置陰影，它將與「background-color」顏色相同。 – beebee 2013-04-24 01:07:53

因此，如果我將邊框半徑添加到上面的'.top' div，它將圍繞已經是白色的div的角落。但我需要這個角落是灰色的。其餘白色。灰色看起來是'.middle'的一部分。 – Ryan 2013-04-24 01:09:27

您要使用邊界半徑和它的變種。

border-radius: 5px 5px 0px 0px; 
-moz-border-radius: 5px 5px 0px 0px; 
-webkit-border-radius: 5px 5px 0px 0px;

這一個很不錯的工具： http://www.cssportal.com/css3-rounded-corner/

來源

2013-04-24 01:05:29

是的，我一直在玩'.border-top -right-radius（10px）;'mixin in bootstrap，但我不知道如何在我的示例中將「空」角的背景與'.middle'相同。 – Ryan 2013-04-24 01:06:56

canb你張貼你想要它看起來像到底什麼圖像？ – 2013-04-24 01:11:43

更新後的圖像。謝謝。 – Ryan 2013-04-24 01:14:04

使用CSS3 邊界半徑。

.top 
    { 
     border-bottom-right-radius: 3px; 
     -moz-border-radius-bottomright: 3px; 
     -webkit-border-bottom-right-radius: 3px; 
    } 

.bottom 
    { 
     border-top-right-radius: 3px; 
     -moz-border-radius-topright: 3px 
     -webkit-border-top-right-radius: 3px; 
    }

來源

2013-04-24 01:07:07

如果我理解你正確，你正在尋找一個倒轉的邊界半徑。這是你想到的嗎？

http://jsfiddle.net/3pW2M/

如果白色區域必須是透明的，以示對實例的背景圖像這是行不通的。

.top { 
    position: relative; 
} 

.topcorner { 
    position: absolute; 
    margin: 0; 
    bottom: 0; 
    right: 0; 
    height: 50px; 
    width: 50px; 
    background: gray; 
} 

.topcorner:after { 
    content: ''; 
    position: absolute; 
    height: 50px; 
    width: 50px; 
    background: white; 
    border-radius: 0 0 50px 0; 
}

來源

2013-04-24 01:18:24

是的！這是我正在尋找的。我會玩這個來確保，但這可能會奏效！謝謝。 – Ryan 2013-04-24 01:37:50

我假設這將需要某種用戶交互，導航，選項卡，分機。所以我設置了一個jQuery的懸停功能 - jsFiddle

$(document).ready(function() { 
    $('.top').hover(function() { 
    $('.middle').toggleClass('notSelect2'); 
    $('.bottom').toggleClass('notSelect3'); 
    }); 

    $('.middle').hover(function() { 
    $('.top').toggleClass('notSelect'); 
    $('.bottom').toggleClass('notSelect2'); 
    }); 

    $('.bottom').hover(function() { 
    $('.middle').toggleClass('notSelect'); 
    $('.top').toggleClass('notSelect3'); 
    }); 
});

來源

2013-04-24 02:59:25 apaul

如何將外圓角加到div上？

回答

jsFiddle example

相關問題