CSS“2D”边界问题

2017-04-24 138 views 0 likes

我试图做到这一点边界，但我不能得到它的工作，我想知道是否有人对如何做到这一点任何想法：CSS“2D”边界问题

所以远远这就是我所得到的，我尝试着使用盒子阴影，但我可以使用任何其他解决方案。

<ul class="loteos-archive"> 

    <li> 

     <div class="loteos-square-bg"> 
     <a class="thumb" href="#" style="background-image:url(image.jpg);"></a> 
     </div> 

    </li> 

</ul>

CSS：

ul.loteos-archive li .loteos-square-bg{ 
    height: 400px; 
    width: 100%; 
    -webkit-box-shadow: -5px 4px 0px -4px blue; 
    -moz-box-shadow: -5px 4px 0px -4px blue; 
    box-shadow: -5px 4px 0px -4px blue; 
} 
ul.loteos-archive li .loteos-square-bg a.thumb{ 
    width : 100%; 
    height : 400px; 
    background-repeat: no-repeat; 
    background-size: cover; 
    display: block; 
}

在此先感谢。

来源

2017-04-24 Emilio Venegas Navarrete

我看不出有什么到目前为止，您的方法的问题，'盒阴影'应该工作，也许你只需要调整一些值，即'盒阴影：25px 25px 0 0 blue;' –

谢谢!!，我现在工作 –

回答

这里的box-shadow的DOC：用于x（在doc又名h-shadow）https://www.w3schools.com/cssref/css3_pr_box-shadow.asp

负值只是使它向左走，为y（在doc又名v-shadow）负值只是让它去顶端。

既然你不需要模糊或传播，你可以省略它们（它们是可选的）。

因此，只需添加这一些调整，你就准备去：

ul.loteos-archive li .loteos-square-bg{ 
    height: 400px; 
    width: 100%; 
    -webkit-box-shadow: /*some positive value, called Vx afterward*/px /*Vx*/px blue; 
    -moz-box-shadow: /*Vx*/px /*Vx*/px blue; 
    box-shadow: /*Vx*/px /*Vx*/px blue; 
}

可以，例如，尝试（与Vx的= 40）：

ul.loteos-archive li .loteos-square-bg{ 
    height: 400px; 
    width: 100%; 
    -webkit-box-shadow: 40px 40px blue; 
    -moz-box-shadow: 40px 40px blue; 
    box-shadow: 40px 40px blue; 
}

来源

2017-04-24 15:19:10 Vivick

非常感谢您的帮助！，它运行良好。 –

CSS“2D”边界问题

回答

相关问题