4

谁能指导我，如何在 CSS 中创建“几乎”方形背景？

我想获得棕色背景并在其上添加带有错误项目符号的文本，以及如何在 CSS 的右上角创建虚线黄色？

我的工作进度在这里：

HTML：

<body>
    <div id="contentContainer">
        <div id="setBackground">
            <div id="header"> <span class="style1">This is LOGO </span>

                <hr />
                <div id="body_block">
                    <p class="intro">Introduction</p>

                    <h1> Back </h1>
                    Click Here

                    <h2> Next </h2>
                    Click Here

                    <p>More about Web Design:</p>
                    <p>• Bla bla bla... .</p>
                    <p>Contact:</p>
                    <p>• Bla bla bla...</p>
                    <div id="footer">
                        <!--hr class="footer"/-->
                        <p>&copy; Copyright 2013
                        <a href="">sample.com </a>|
                        <a href="">More Site </a>
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

CSS：

@charset"UTF-8";

/* CSS Document */
 hr {
    clear:both;
    border: 0;
    height:12px;
    width:100%;
    background-color: #993300;
}
.intro {
    color: #1e2a74;
    font-size:16px;
    font-weight:bold;
    font-family:Arial, Helvetica, sans-serif;
}
#footer {
    background-color:#6994AF;
    clear: both;
    color: #FFFFFF;
    font-size: 0.8em;
    margin: 0;
    padding: 0;
    font-family:Arial, Helvetica, sans-serif;
}
#footer p {
    border-top: 1px solid #83CDE1;
    margin: 0;
    padding: 15px 0;
    text-align: left;
}
#footer a {
    text-align:right;
}
.style1 {
    font-size: 24px;
    font-weight: bold;
    font-family: Arial, Helvetica, sans-serif;
    background-color: #FFFFFF;
}
4

6 回答 6

1

边框半径 CSS 属性可以帮助您获得圆角 - 特别是这样的东西应该对包含其他所有内容的粉红色元素起到作用。

div {
    /* border-radius: Top-Left , Top-Right, Bottom-Right, Bottom-Left */
    border-radius: 20px 5px 20px 5px;
}

我会亲自将其分解为几个 div、标题和正文。将带有颜色的背景黄点放在顶部 div 上，并将边框半径应用于顶部。

然后将其他 div 的内容放在正文中，并为每种情况应用这些边框样式。

然而，这只是一种方法，我相信还有很多其他方法。

更多关于 CSS 圆角边框的信息在这里

于 2013-05-19T01:01:58.930 回答
0

尝试边界半径属性

示例 1

div{border-radius:10px;}

示例 2

div{border-radius:10px 15px;}

欲了解更多信息，请访问：- CSS-TRICKS

于 2013-08-20T09:31:53.863 回答
0

这个呢？您可以使用 div 创建一个“伪”“hr”标签：P

//IN HTML

<div id="CUSTOM_HR_WITH_TEXT">SAMPLE TEXT // Custom "hr" tag with text.</div>

//AND IN CSS

#CUSTOM_HR_WITH_TEXT {
border-radius: 10px 10px 10px 10px;
border: 0;
height: auto;
width: auto;
background-color: #993300;
color: #fff;
text-align: center;
}
于 2013-10-06T20:09:14.730 回答
0

这是jsFiddle

你的设计真的很糟糕。您不必将所有 div 嵌套在一起。我稍微更改了您的 html（只是重新排列了您的 div 并添加了两个新的 divleftDiv和rightDiv） HTML：

<body>
    <div id="contentContainer">
        <div id="setBackground">
            <div id="header"> <span class="style1">This is LOGO </span>

                <hr />
            </div>
            <div id="body_block">
                    <p class="intro">Introduction</p>

                   <h1> Back </h1>
                   Click Here

                   <h2> Next </h2>
                   Click Here




             </div>


            <div id="leftDiv">
                    <p>More about Web Design:</p>
                    <p>• Bla bla bla... .</p>
            </div>
            <div id="rightDiv">
                    <p>Contact:</p>
                    <p>• Bla bla bla...</p>
            </div>

            <div id="footer">
                    <!--hr class="footer"/-->
                    <p>
&copy; Copyright 2013
                        <a href="">sample.com </a>|
                        <a href="">More Site </a>
                        </p>
                </div>
          </div>
        </div>
    </body>

将这些规则添加到您的 CSS 中：

#leftDiv{
    clear:both;
    width:200px;
    background:brown;
    float:left;
    border-top-left-radius:25px;

}
#rightDiv{
    margin-left:20px;

    border-bottom-right-radius:25px;
     background:brown;
    float:left;
}
于 2013-05-19T00:59:04.587 回答
0

试试这个。

     border-bottom-right-radius:20px;
于 2013-05-19T01:02:04.217 回答
0

边框半径是您要查看的内容：http ://www.w3schools.com/cssref/css3_pr_border-radius.asp

在你的情况下，它会是这样的：

border-radius: 100px 0 100px 0; /*top-left top-right bottom-right bottom-left */

http://jsfiddle.net/spKMM/

于 2013-05-19T01:03:27.657 回答