CSS:border-radius //插入背景;白角

超级包

因此,我对HTML / CSS完全陌生。我现在正在设计一个有趣的项目来学习Web开发。我创建了一个搜索栏,并希望添加带有边框半径的著名圆角。到目前为止,效果很好。问题在于,由于搜索栏位于菜单栏中,因此白色背景现在会通过边缘发光。我将在下面发布屏幕截图和代码。我不是100%熟悉CSS盒模型。我想这是问题所在。也许我可以用菜单背景图片填补空白?希望有人可以指导我在哪里解决此问题。

截图:https//picload.org/view/prwpirg/bildschirmfoto2015-09-20um16.3.png.html

HTML代码:

<!DOCTYPE html>
<html>
    <head>
        <title>facefuck</title>
        <link rel="stylesheet" href="./css/style.css" type="text/css"/>
        <link rel="icon" href="favicon.ico" type="image/x-icon" />
    </head>
    <body>
        <div class="headerMenu">
            <div id="wrapper">
                <div class="logo">
                    <img src="./img/face_logo.jpg" />
                </div>
                <div class="search_box">
                    <form action="search.php" method="GET" id="search">
                        <input type="text" name="q" size="60" placeholder="Put your dick here" />
                    </form>
                </div>
                <div id="menu">
                    <a href="#" />Home</a>
                    <a href="#" />About</a>
                    <a href="#" />Sign Up</a>
                    <a href="#" />Sign In</a>
                </div>
            </div>
        </div>
    </body>
</html>

CSS代码:

* {
    margin: 0px;
    padding: 0px;
    font-family: Arial, Helvetica, Sans-serif; 
    font-size: 12px;
    background-color: #EAEDF5;
}
.headerMenu {
    background-image: url("../img/menu_bg.png");
    height: 60px;
    border-bottom: 0px;
    padding-left: auto;
    padding-right: auto;
    width: 100%;
}
#wrapper {
    background-image: url("../img/menu_bg.png");
    margin-left: auto;
    margin-right: auto;
    width: 1000px;
    padding-top: 0px;
    padding-bottom: 0px;
}
.logo {
    background-image: url("../img/menu_bg.png");
    width: 125px;
}
.logo img {
    width: 150px;
    height: 100%;
}
.search_box {
    position: absolute;
    top: 17px;
    margin-left: 150px;
}
#search input[type="text"] {
    background: url(../img/search_white.png) no-repeat 10px 6px #D8D8D8;
    outline: none;
    border: 0 none;
    border-radius: 100px;
    font: bold 12px Arial, Helvetica, Sans-serif;
    width:300px;
    padding: 5px 15px 5px 35px;
    text-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
    -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
    -webkit-transition: all 0.7s ease 0s;
    -moz-transition: all 0.7s ease 0s; 
    -o-transition: all 0.7s ease 0s;
    transition: all 0.7s ease 0s;
}
#search input[type="text"]:focus {
    background: url(../img/search_black.png) no-repeat 10px 6pc #fcfcfc;
    color: #6a6f75;
    width: 300px;
    -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
    -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
    text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
}
...
Tgys

它是由

* {
    background-color: #EAEDF5;
}

这将使您.search_boxform具有该背景色。您可以使用以下方法覆盖它:

.search_box, form {
    background-color: transparent;
}

不过,我建议您删除第一条规则,只将#EAEDF5背景色应用于body而不是所有元素。


用一个具体的例子来可视化:

* {
    background-color: gray;
}

#a {
    padding: 20px;
    background-color: pink;
}

#c {
    padding: 10px;
    background-color: white;
    border-radius: 20px;
}
<div id="a">
    <div id="b">
        <div id="c">
            Hello world!
        </div>
    </div>
</div>

在上面的示例中,*选择器将定位所有元素(所有div和主体),从而将每个div的背景色设置为灰色。该两个div与IDSac将覆盖此背景色,而b没有并获得背景色应该从使用的*选择,所以它会具有背景色为灰色,而不是初始值transparent,这已经让粉红色闪耀。

要解决此问题,可以强制#bdiv具有透明的背景,或者将*-selector更改body,这将仅为页面的背景色而非每个单个元素上色(除非被覆盖)。

在这里查看我建议采取的修复措施:

body {
    background-color: gray;
}

#a {
    padding: 20px;
    background-color: pink;
}

#c {
    padding: 10px;
    background-color: white;
    border-radius: 20px;
}
<div id="a">
    <div id="b">
        <div id="c">
            Hello world!
        </div>
    </div>
</div>

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章