在弯曲框内创建居中弯曲框

发布于 2024-12-29 07:41:07 字数 918 浏览 1 评论 0原文

我遇到了另一个 CSS 问题，希望能尽快得到解决。我试图简单地拥有一个具有一种背景颜色的弯曲文本框，垂直和水平居中于另一种颜色的另一个弯曲框内。我尝试对一个框使用 border-width 属性，但这仅弯曲了框的外边框，而不是另外弯曲的内边框。我几乎可以正常工作，但它没有垂直居中。这不会太难，但我正在碰壁。这是代码：

<html>
<head>
<style type="text/css">
div#outer {
    margin:0 auto;
    width:100%;
    height:50px;
    background-color:#0000FF;
    border-radius:5px;
    -webkit-border-radius:5px;
    text-align:center;
}

#inner{
    margin:0 auto;
    width:95%;
    height:40px;
    margin-top:5px;
    display:block;
    background-color:#ff0000;
    border-radius:5px;
    -webkit-border-radius:5px;
    color:#FFF;
    font-size:24px;
    font-family:Arial, Helvetica, sans-serif;
    font-weight:bold;
    line-height:40px;
    text-align:center;
}

</style>
</head>
<body>
<div id="outer"><div id="inner">Centered Text goes here</div></div>
</body>
</html>

原文

I got another css issue that I hope can be quickly remedied. I'm trying to simply have a curved box of text with one background color, vertically and horizontally centered inside another curved box of another color. I tried using the border-width attribute for one box, but that only curved the outside border of the box, not the inside border additionally. I almost have it working, but it is not centering vertically. This can't be too hard, but I'm hitting a brick wall. Here is the code:

<html>
<head>
<style type="text/css">
div#outer {
    margin:0 auto;
    width:100%;
    height:50px;
    background-color:#0000FF;
    border-radius:5px;
    -webkit-border-radius:5px;
    text-align:center;
}

#inner{
    margin:0 auto;
    width:95%;
    height:40px;
    margin-top:5px;
    display:block;
    background-color:#ff0000;
    border-radius:5px;
    -webkit-border-radius:5px;
    color:#FFF;
    font-size:24px;
    font-family:Arial, Helvetica, sans-serif;
    font-weight:bold;
    line-height:40px;
    text-align:center;
}

</style>
</head>
<body>
<div id="outer"><div id="inner">Centered Text goes here</div></div>
</body>
</html>

分享到QQ

分享到微博