填充/邊距/陰影在桌面視圖中消失，但在檢查中顯示。錯誤在所有螢屏尺寸上仍然存在-有解無憂

在學校的示例作品集網站上作業，前端無疑是我的一周作業地點。當我正常加載站點時，它不會顯示任何填充或邊距，但是當我在最大尺寸下使用檢查到斷點時，它看起來要好得多，具有邊距和填充以及更好的陰影。

 CSS 
     .neumorphicDefault {
        background-color: transparent;
        box-shadow:  0.5rem 0.5rem 1rem #d1d9e6,
                     -0.5rem -0.5rem 1rem #ffffff;
        text-decoration: none;
        margin: 1rem;
        text-align: center;
    }



 .neumorphicActive {
        background-color: transparent;
        box-shadow:  inset 5px 5px 10px #d1d9e6,
                     inset -5px -5px 10px #ffffff;
        text-decoration: none;  
        margin: 1rem;
        padding: 1rem;
    }

<!-- HTML -->
    <div class="container-fluid" id="cover">
    <!-- NAVIGATION -->
        <div class="d-flex justify-content-center">
            <nav class="navbar navbar-expand-sm">
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon">
                        <i class="fa-solid fa-burger align-middle"></i>
                    </span>
                </button>
                <div class="collapse navbar-collapse">
                    <ul class="navbar-nav">
                        <li class="nav-item">
                            <a class="nav-link rounded-pill text-custom-gray neumorphicActive" href="#portfolio">Portfolio</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link rounded-pill text-custom-gray neumorphicDefault" href="#about">About</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link rounded-pill text-custom-gray neumorphicDefault" href="#projects">Gallery</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link rounded-pill text-custom-gray neumorphicDefault" href="#contact">Contact</a>
                        </li>
                    </ul>
                </div>
            </nav>
        </div>
        
        <!-- WELCOME SECTION -->
        <div class="container-fluid ms-lg-5 mt-5 p-sm-5 welcomeSection">
            <div class="row">
                <div class="col-8">
                    <div class="text-custom-gray m-1" style="font-size: 5vw"> Hello, I am <span id="nameSpan">Chandler Renteria</span></div>
                    <div class="text-custom-gray  m-1" style="font-size: 5vw"> Full-Stack Developer</div>

                    <div class="d-flex">
                        <a  class="rounded-pill ms-0 mw-25 text-custom-gray neumorphicDefault" href="#portfolio">See My Work</a>
                        <a  class="rounded-pill mw-50 text-custom-gray neumorphicDefault" href="#contact">Start A Conversation</a>  
                    </div>              
                </div>  
                <div class="col welcomeGraphic">
                    <div class="graphic w-100">Placeholder</div>
                </div>
            </div>
        </div>
    </div>

填充/邊距/陰影在桌面視圖中消失，但在檢查中顯示。錯誤在所有螢屏尺寸上仍然存在

uj5u.com熱心網友回復：

試試這個cdn，你可能安裝有問題

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X R7YkIZDRvuzKMRqM OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">

.neumorphicDefault {
        background-color: transparent;
        box-shadow:  0.5rem 0.5rem 1rem #d1d9e6,
                     -0.5rem -0.5rem 1rem #ffffff;
        text-decoration: none;
        margin: 1rem;
        text-align: center;
    }



 .neumorphicActive {
        background-color: transparent;
        box-shadow:  inset 5px 5px 10px #d1d9e6,
                     inset -5px -5px 10px #ffffff;
        text-decoration: none;  
        margin: 1rem;
        padding: 1rem;
    }

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X R7YkIZDRvuzKMRqM OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
<!-- HTML -->
    <div class="container-fluid" id="cover">
    <!-- NAVIGATION -->
        <div class="d-flex justify-content-center">
            <nav class="navbar navbar-expand-sm">
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon">
                        <i class="fa-solid fa-burger align-middle"></i>
                    </span>
                </button>
                <div class="collapse navbar-collapse">
                    <ul class="navbar-nav">
                        <li class="nav-item">
                            <a class="nav-link rounded-pill text-custom-gray neumorphicActive" href="#portfolio">Portfolio</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link rounded-pill text-custom-gray neumorphicDefault" href="#about">About</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link rounded-pill text-custom-gray neumorphicDefault" href="#projects">Gallery</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link rounded-pill text-custom-gray neumorphicDefault" href="#contact">Contact</a>
                        </li>
                    </ul>
                </div>
            </nav>
        </div>
        
        <!-- WELCOME SECTION -->
        <div class="container-fluid ms-lg-5 mt-5 p-sm-5 welcomeSection">
            <div class="row">
                <div class="col-8">
                    <div class="text-custom-gray m-1" style="font-size: 5vw"> Hello, I am <span id="nameSpan">Chandler Renteria</span></div>
                    <div class="text-custom-gray  m-1" style="font-size: 5vw"> Full-Stack Developer</div>

                    <div class="d-flex">
                        <a  class="rounded-pill ms-0 mw-25 text-custom-gray neumorphicDefault" href="#portfolio">See My Work</a>
                        <a  class="rounded-pill mw-50 text-custom-gray neumorphicDefault" href="#contact">Start A Conversation</a>  
                    </div>              
                </div>  
                <div class="col welcomeGraphic">
                    <div class="graphic w-100">Placeholder</div>
                </div>
            </div>
        </div>
    </div>

轉載請註明出處，本文鏈接：https://www.uj5u.com/net/484774.html

標籤：html css 推特引导引导程序 5

上一篇：如何使用“位置：絕對”將影像放置在彼此之上而不覆寫其他部分？HTMLCSS

下一篇：導航欄切換器不打開或打開和關閉引導程式5