Question

有人可以建议我如何使用rounded corners创建div，但有两种不同的颜色，例如this example

这是我用来制作不同颜色的div但不起作用的代码 CSS：

.roundcont_n {
    width: 250px;
    background-color: white;
    color: #000;
}

.roundcont_n_u {
    width: 250px;
    background-color: #808080;
    color: #fff;
}
.roundcont_n_d {
    width: 250px;
    background-color: #606060;
    color: #fff;
}


.roundtop_n { 
    background: url(images/toprt.png) no-repeat top right; 
}

.roundbottom_n {
    background: url(images/btmrt.png) no-repeat top right; 
}

img.corner {
   width: 15px;
   height: 15px;
   border: none;
   display: block !important;
}

这是html代码：

<div class="roundcont_n">
 <div class="roundcont_n_u">
    <div class="roundtop_n">
     <img src="images/topLeft.png" alt="" 
     width="15" height="15" class="corner" 
     style="display: none" />sdfsdfsdfjlsdkjfkls
   </div>
 </div>
 <div class="roundcont_n_d">
   <p>Lorem ipsum dolor sit amet, consectetur adipisicing 
   elit, sed do eiusmod tempor incididunt ut labore et 
   dolore magna aliqua. Ut enim ad minim veniam, quis 
   nostrud exercitation ullamco laboris nisi ut aliquip 
   ex ea commodo consequat. Duis aute irure dolor in 
   reprehenderit in voluptate velit esse cillum dolore eu 
   fugiat nulla pariatur. Excepteur sint occaecat cupidatat 
   non proident, sunt in culpa qui officia deserunt mollit 
   anim id est laborum.</p>

   <div class="roundbottom_n">
     <img src="images/btmLft.png" alt="" 
     width="15" height="15" class="corner" 
     style="display: none" />
   </div>
 </div>
</div>

此处图片btmLft.png和btmrt.png颜色相同，topLeft.png和toprt.png颜色相同

提前致谢

Answer 1

“两种颜色”是什么意思？边框？如果是这样，我已经在my site上实现了这样：

div.bubbleContainer{
    display: inline-block;
    position:relative;
    width: 100%;
}

div.bubble{
    overflow:visible;
    background-color:#ffffff;
    margin-right:10px;
    margin-top:0px;
    border-width:3px; 
    border-color:#002e66; 
    border-style:solid;
    padding-left:10px;
    padding-right:10px;
}

img.bubble-topLeft{
    position:absolute;
    top:-1px;
    left:-1px;
}

img.bubble-topRight{
    position:absolute;
    top:-1px;
    right:9px;
}

img.bubble-bottomLeft{
    position:absolute;
    bottom:-1px;
    left:-1px;
}

img.bubble-bottomRight{
    position:absolute;
    bottom:-1px;
    right:9px;
}

<div class="bubbleContainer">
<img class="bubble-topRight" src="/gfx/bubble-topRight.png" alt="">
<img class="bubble-topLeft" src="/gfx/bubble-topLeft.png" alt="">
<img class="bubble-bottomLeft" src="/gfx/bubble-bottomLeft.png" alt="">
<img class="bubble-bottomRight" src="/gfx/bubble-bottomRight.png" alt="">
<div class="bubble">

<p>Lorem Ipsum dolor sit amet...</p>

</div></div>

Answer 2

您可以使用EasyImg（www.easyimg.com）生成该弹出窗口所需的图像。您可以指定一个不透明度设置，该设置在渲染之前应用于图像以使其半透明。 EasyImg也将为您处理圆角。

希望这有帮助。

如何使div具有两种颜色的圆角？

2 个答案: