Question

尝试在我的网站上显示图像效果时，它们不会显示。如果我在jsfiddle.net上运行图像，它的工作原理非常好。但是，当我在我的所有代码中测试它时，我的图像不起作用。我想在图像周围有一个边框阴影效果。这样做的代码在我的代码中，但正如你在我的网站图片中看到的，没有阴影。

这是我在没有图像的jsfiddle.net中测试时的图像。 enter image description here

我的代码：

CSS：

#collage-container {

        /*width: 699px;*/
        width: 800px;
        /*height: 510px;*/
        height: 320px;
        float: left;
        margin-left: 200px;
        margin-top: 10px;
        background-color: #DADADA;
    }

    #collage-one{

    width: 699px;
    height: 300px;
    margin-left: 50px;
    margin-top: 10px;
    box-shadow: 0 0 20px black;
    }

HTML：

<div id = "collage-container">
    <img src = "longblue.jpg" id = "collage-one"/>
    </div>

enter image description here

更新：这是我所有的CSS

       <head>

   <style type = "text/css">


    /* Formating for body of Web Site */
    * {margin: 0; padding: 0;}
    body {
     font-family: times new roman;
     background-color: #ebebeb;


     }

    /* Fixed screen size so objects don't shift */
     #screen {
     /*
     min-width: 768px;
     min-height: 100% !important;
     margin-bottom: 30px;
     */
     /* This locks everything in place*/
     top:0px;
     margin: 0 auto; 
     width:1500px;
     height: 100%;
         padding-top:0;
         padding-bottom: 30px;
         margin-bottom: 150px;
         postion: absolute;
     margin-left: 70px;

     }

    /* Format for black strip header  */
     #header {
        background-color: black;
        height: 168px;
        width: 100%;
        position: relative;
     }

    /* Class1: Holds the navigation buttons in header   */
    .container {
        width: 960px;
        height: auto;
        margin: 0 auto;
        margin-left: 0;
    }

    /* Class2: Holds the small containers for short articles   */
    .containerShort {
                width: 480px;
                height: auto;
                margin: 0 auto;
    }

    /* Sub Classes: For Class2  */
    .short1 {

        right: 30px;
    }

    .short2 {
        right: 30px;

    }

    /* Format for Tree logo in header   */
    #logoArea {
        width: 300px;
        height: 168px;
        background-image: url(treesmall.jpg);
        float: left;
        margin-left: 30px;
        }

    /* Formating for location of navagation buttons  */
    #navArea
    {
        height: 100%;
        float: right;
        margin-right: 0px;
        margin-top: 80px;
        margin-left: 100px;


    }

    /* Removes the bullets for navagation buttons in header  */
    #nav
    {
        list-style: none;

    }

    /* Navagation formating */
    #nav a
    {
        color: white;
        text-decoration: none; /*removes underline*/

    }

    /* Formats the links of navagation buttons   */
    #nav li
    {
        float: left;
        margin-left: 60px;
        background-color: #252525;
        padding: 8px;
        bording: 1px solid silver;
        border-radius: 5px;

    }

    /* Makes a hovering effect where when the mouse hovers over the 
     links they change color  */
    #nav li:hover
    {
        background-color: gray;
    }

    /* Sub class formating for container class  */
    .page
    {
        background-color: white;
        padding: 10px;
        margin-top: 10px;
        width: 1100px;
        float: right;
        border-radius: 5px;
        padding-bottom: 1px;

    }

    /* Side quote article main page */
    .article
            {
                background-color: #ebebeb;
                padding-top: 1px;
                margin-top: 20px;
                width: 120px;
                float: right;
                border-radius: 20px;
                height: 300px;
                border: 1px solid black;
                margin-right: 20px;
                text-align: left;

    }

    /* Formating for left sidebar of information  */
    #sidebar {

    background-color: #B4B4B4;
    height: auto;
    width:350px;
    float:left;
    margin-top: 10px;
    border-radius: 5px;
    padding: 10px;
    color: #483D8B;
    }

    /* footer formating  */
    #footer {

        background-color: black;
        height: 40px;
        width: 1500px;
        color: white;
        padding-top: 10px;
        position: relative center;
        bottom: 0;
        text-align: center;
        margin-left:70px;
    }
    /* Formating of Header quote   */
    #quote {
        color: white;
        float: right;
    }

    /* Paragraph formating  */
    p {
        color: black;
        margin-bottom: 20px;
        padding: 5px;
        padding-left: 40px;
    }

    p.light {

    color: white !important;
    margin-bottom: 60px;
    padding: 5px;
    padding-left: 40px;

    }

    p .imagespace {

    padding-left: 40px;
    margin: auto;
    }

    h3 {
        margin-bottom: 60px;
    }

    h2 {

    font-family: "Times New Roman";
    font-style: oblique;
    }

    #collage-container {

        /*width: 699px;*/
        width: 800px;
        /*height: 510px;*/
        height: 320px;
        float: left;
        margin-left: 200px;
        margin-top: 10px;
        background-color: #DADADA;
    }

    #collage-one{

    width: 699px;
    height: 300px;
    margin-left: 50px;
    margin-top: 10px;
    box-shadow: 0 0 20px black;
    }

    /*#collage-two,#collage-three,
    #collage-four{

    width: 226px;
    height: 200px;
    padding: 5px;
    background-color: black;
    background-position: top center;
    float: right;

    }*/

    /*#space {

    width:300px;
    height: 508px;
    background-color: white;
    float: left;
    margin-top: 0;
    margin-left: 120px;
     box-shadow: hshadow, vshadow blur color 
    box-shadow: 10px 0 20px #B4B4B4;
    border-radius: 10px;
    }*/

    #ego {
    box-shadow: 0 0 20px #B4B4B4;
    }

    #marquee{

    color: #483D8B;
    margin-top: 10px;
    margin-bottom: 0px;
    width: 1025px;
    float: right;

    }





   </style>

   </head>

Answer 1

根据评论中的建议，看起来我必须修复我的影子以接受更多浏览器版本。

谢谢大家，我会玩它。

主要帮助：@ Phillips126

Box-Shadow赢了在我的网站上工作

1 个答案: