Question

应显示的内容：使用旁边元素完成圆角的边框。显示内容：带正确轮廓颜色的方框边框;但它们并非四舍五入。

当我添加背景颜色时：旁边元素的常规方框轮廓内会出现一个带圆角的框。

这是我的代码与我想要做的事情相关联。

      <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;
}

Answer 1

使用border代替outline。你很亲密！

请参阅：http://jsfiddle.net/wyxjtacg/

Answer 2

尝试添加边框：1px纯黑色;而不是'轮廓'。

圆形边框不适用于HTML网站的CSS样式表

2 个答案: