Question

我试图在我的网站标题上实现阴影效果，但是，box-shadow属性不起作用。我想这可能是因为标题被保存为一个单独的header.php文件，我下面的横幅图像是index.php文件的一部分，因此阴影不会正确地投射到图像上。我该如何解决这个问题？

更新：抱歉，我忘了添加我的代码。

的header.php

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
    <title>...</title>
        <meta charset="<?php bloginfo( 'charset' ); ?>">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="profile" href="http://gmpg.org/xfn/11">

<?php wp_head(); ?>
</head>

<body <?php body_class(); ?>>
    <div id="page" class="site">
        <a class="skip-link screen-reader-text" href="#content"><?php esc_html_e( 'Skip to content', '...' ); ?></a>

    <header>
        <div class="wrapper">
            <img class="logo" src="<?php echo(get_template_directory_uri()); ?>..." alt="...">
            <nav role="navigation" class="navbar navbar-default">
                <div class="container-fluid">
                    <div class="nav navbar-nav">
                        <?php wp_nav_menu( array( 'theme_location' => 'menu-1', 'menu_id' => 'primary-menu' ) ); ?>
                    </div>
                </div>
            </nav><!-- #site-navigation -->
        </div><!-- .wrapper -->
    </header><!-- .header -->

    <div id="shader">
    </div>


    <div id="content" class="site-content">

前page.php文件

<?php get_header(); ?>
    <div id="primary" class="content-area">
        <main id="main" class="site-main" role="main">

            <!--CONTENT START-->

        <div id="banner"> <!--continues...-->

的style.css

#shader{
    position: relative;
    bottom: 10px;
    width: 100%;
    height: 10px;
    background-color: white;
    box-shadow: 0px 10px 10px #c0c0c0;
}

#banner{
    background-image: url("https://www.metoffice.gov.uk/binaries/content/gallery/mohippo/images/migrated-image/c/cirrus_clouds.jpg");<!--example image-->
    background-repeat: no-repeat;
    background-size: 100%;
}

CSS标题阴影

0 个答案: