我不知道如何去除的线条或边框

问题描述 投票:0回答:0

我做了一个显示:网格;带有网格区域,然后有一个边框或 idk 那是什么类型的线,我无法删除,这似乎是一个糟糕的细节。

我尝试删除它,删除框阴影和所有边框,但它仍然存在,这让我发疯......我只需要删除那些像白色或某种灰色的线条。 这是我的代码。我在 315px min-width 中做这件事,为手机用户寻找好看的外观。 “虫子”的照片Here's what I'm talking about

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body {
    background: linear-gradient(30deg, rgb(255, 188, 117) , rgb(112, 206, 214));
    /* background: purple; */
    height: 100vh;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

.div__grid-main {
    display: grid;
    height: 90%;
    width: 90%;
    /* border: 2px solid none; */
    /* border-radius: 10px; */
    /* box-shadow: -1px 1px 10px rgba(27, 26, 26, .3);  */
    /*derecha abajo transparente?*/

    grid-template-areas: 

    "div__1 div__1 div__1"
    "div__2 div__x div__x"
    "div__3 div__3 div__3"
    "div__4 div__4 div__4"
    "div__5 div__5 div__5";
    grid-template-rows: .3fr .8fr .35fr 4fr .6fr;
}

/* div:first-child {
    border: 2px solid none;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

div:last-child {
    border: 2px solid none;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
} */


.div__1 {
    grid-area: div__1;
    background: rgb(52, 135, 92);
}

.div__1-p-plants {
    color: #eee;
    margin: 10px;
    text-align: center;
}

.div__2 {
    grid-area: div__2;
    /* background: #eee; */
    /* border-bottom: solid 1px #dacece; */
    /* border-right: solid 1px #eee; */
    display: flex;
    justify-items: center;
    align-items: center;
}

.div__x {
    grid-area: div__x;
    /* background: #eee; */
    /* border-bottom: solid 1px #dacece; */
    /* border-left: solid 1px #dacece; */
    display: flex;
    justify-content: right; /* Horizontal*/
    /* align-items: center;  */
}

.div__2-li {
    display: inline-block;
    margin-top: 20px;
}

.icono-1 { /* Acabo de hacer una modificación, esto se llamaba "aaa", supongo que era el ícono-1*/
    position: relative;
}

.div__2-a {
    margin: 50px;
}

.div__2-a-1 {
    margin-left: 10px;
    /* height: 40px; */
    /* justify-self: center; */
    position: relative;
    /* display: inline-block; */
}

.fa-leaf {
    font-size: 30px;
    /* margin: 0; */
    position: absolute;
    left: -30px;
    top: 5px;
}

.div__2-a-1::after {
    content: "FAQ, Blog, Support";
    position: absolute;
    color: #afa6a6;
    display: block;
    width: 130px;
    bottom: 10;
    left: 0;
}

.fa-magnifying-glass {
    margin-right: 45px;
    font-size: 25px;
}

.div__2-p-tiltle-1 {
    margin-left: 20px;
    /* text-align: left; */
    font-size: 30px;
    /* background: #ca1d1d; */
    width: 100%;
}

.div__2-p-tiltle-1::after {
    content: "";
    width: 100px;
    height: 1px;
    background: #000;
    display: block;
}

.div__3 {
    grid-area: div__3;
    /* background: #eee; */
    display: flex;
    /* justify-content: space-around; */
    justify-content: center; /* Horizontal */
    align-items: center;
}

a { 
    color: #000;
    text-decoration: none;
    margin: 10px;
}

.div__4 {
    grid-area: div__4;
    background: #bfdbdb;
    display: flex;
    justify-content: right;
    align-items: center;
}

.div__4-p-titulo {
    font-size: 50px;
    position: relative;
    margin-top: 20%;
}

.div__4-p-titulo::after {
    content: "Enjoy the feel-good vibes of the season with our easy-care plants and signature planters.";
    font-size: 12px;
    display: block;
    position: absolute;
}

.div__4-img-plants3 {
    height: 100%;
    width: 100%;
    object-fit: cover;
    /* display: block;
    margin-right: 0;
    margin-left: auto; */
}

.div__5 {
    grid-area: div__5;
    background: #eee;
}

.div__4-div-img {
    background: #bfdbdb;
    width: 50%;
    height: 100%;
}

.div__4-div-p {
    background: #bfdbdb;
    width: 50%;
    height: 100%;
    display: flex;
    justify-content: center;
    /* align-items: normal; */
    /* margin-top: 200px; */
    position: relative;
}

.btn {
    position: absolute;
    top: 58%;
    left: 19%;
    /* box-shadow:inset 0px 1px 0px 0px #289160; */
    background-color:#289160;
    border:1px solid #289160;
    display:inline-block;
    cursor:pointer;
    color:#ffffff;
    font-family:Arial;
    font-size:11px;
    font-weight:bold;
    padding:8px 14px;
    text-decoration:none;
    transition-duration: 1s;
}

.btn:hover {
    background-color:#2f4723;
}

.div__6 {
    display: none;
}

.div__4-p-titulo-responsive {
    display: none;
}

@media only screen and (min-width: 315px) {

    :root {
        --col-fondo-blanco: #eee;
        --col-fondo-transparent: rgb(35, 31, 141);
        --col-borde-gris: #dacece;
    }

    .div__grid-main {
        display: grid;
        height: 90%;
        width: 90%;
        /* border: 2px solid none; */
        /* border-radius: 10px; */
        /* box-shadow: -1px 1px 10px rgba(27, 26, 26, .3);  */
        /* background: #000; */
        /* box-shadow: none; */
        /*derecha abajo transparente?*/
        
        grid-template-areas: 
    
        "div__1 div__1 div__1"
        "div__2 div__x div__x"
        "div__3 div__3 div__3"
        "div__4 div__4 div__4" /* Donde está el título */
        "div__6 div__6 div__6" /* Donde irá la imagen */
        "div__6 div__6 div__6"
        "div__6 div__6 div__6"
        "div__5 div__5 div__5"; /* Sección en color blanco */
        grid-template-rows: .3fr 1.5fr .35fr 4fr 2fr 2fr 2fr .6fr; 
        /* .3fr .8fr .35fr 4fr 6fr .6fr */
    }

    /* div {
        background: blue;
    } */

    .div__2 {
        background-color: var(--col-fondo-transparent); 
        /* border-bottom: solid 1px var(--col-borde-gris); */
        /* border-right: solid 0px none; */
    }

    .div__x {
        grid-area: div__x;
        background-color: var(--col-fondo-transparent);
        /* border-bottom: solid 1px var(--col-borde-gris); */
        /* border-left: solid 0px none; */
        display: flex;
        justify-content: right; /* Horizontal*/
        /* align-items: center;  */
    }

    .div__3 {
        background-color: var(--col-fondo-transparent);
        /* border-top: solid 1px none; */
    }

    .li__padre-visit { /* Acá estoy controlando al li padre del "Visit" */
        /* display: flex; */
        /* justify-content: center; */
        /* align-items: center; */
    }

    .div__2-p-tiltle-1::after {
        content: "";
        width: 100px;
        height: 1px;
        background: #000;
        display: block;
    }

    .div__4-div-img {
        display: none;
    }

    .div__4 {
        grid-area: div__4;
        background: #bfdbdb;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .div__4-div-p {
        display: none;
        /* background: #bfdbdb;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative; */
    }


    .div__4-p-titulo-responsive {
        display: block;
        font-size: 40px;
        /* position: relative; */
        /* margin-top: 20%; */
        /* padding: 200px; */
    }
    
    .div__4-p-titulo-responsive::after {
        content: "Enjoy the feel-good vibes of the season with our easy-care plants and signature planters.";
        font-size: 12px;
        display: block;
        position: absolute;
    }

    .div__6 {
        display: block;
        grid-area: div__6;
        background: #bfdbdb;
        width: 100%;
        height: 100%;
    }

    .div__6-img-plants3 {
        display: block;
        /* display: none; */
        height: 100%;
        width: 100%;
        object-fit: cover;
        /* padding: 1px; */
    }

    .icono-1{
        display: none;
    }

    .icono-2 {
        display: none;
    }

    .a-hello {
        display: none;
    }

    .div__2-a-1::after {
        display: none;
    }
}
html css web grid border
© www.soinside.com 2019 - 2024. All rights reserved.