2014-11-01 47 views
0

应该显示什么:带有圆角的边框用边元素完成。显示内容:带正确轮廓颜色的方框边框;但是它们不是圆形的。圆角边框不能用于HTML网站的CSS样式表

当我添加背景色时:具有圆角的盒子出现在旁边元素的常规方框中。

这是我的代码,它与我正在尝试做的事情有关。

 <section id="main"> 

     <aside> 
      <p>The Grand Junction Neonatal Intensive Care Unit offers comprehensive neonatal 
       diagnostic and treatment facilities for critically ill newborns. We're dedicated 
       to providing the highest quality care for all newborns, ranging from healthy 
       neonates to sick or premature newborns requiring close observation or intensive care. 
      </p> 
      <p>All of the neonatologists are board certified. We believe it's critical that our 
       clinicians learn about the latest advances in neonatal intensive care to 
       better serve the community of Grand Junction. 
      </p> 
     </aside> 
     </section> 

and now the styles: 

/* Aside Styles */ 

aside { 
    color: rgb(149, 91, 42); 
    float: right; 
    margin: 30px;  
    outline: 3px solid rgb(149, 91, 42); 
    width: 50%; 

    /* Rounded corners here. Not Working. Don't know why. Please give feedback. */ 
    -moz-border-radius: 30px; 
    -webkit-border-radius: 30px; 
    border-radius: 30px; 
} 

aside p { 
    font-size: 90%; 
    margin: 20px; 
} 
+0

http://jsfiddle.net/chipChocolate/Lfhhutp5/ – 2014-11-01 19:54:27

回答

4

使用border而不是outline。你近了!

参见:http://jsfiddle.net/wyxjtacg/

+0

你需要纠正你的链接...最后删除斜线。 – Dominique 2014-11-01 19:58:13

+0

完成。谢谢! – 2014-11-01 19:59:32

0

尝试添加边框:1px的纯黑色;而不是'大纲'。