CSS3 / HTML5不平衡框阴影？ [英] Uneven box shadow with CSS3 / HTML5?

问题描述

我想为网站创建不均匀的阴影效果，请参阅下面的示例，了解我需要实现的效果：

不幸的是我不认为这可以做到CSS3，据我所知box-shadow属性只能用于创建均匀分布的阴影。

但是，我的CSS3 / HTML5的知识不是很大，所以我想知道是否有人知道无论如何实现这一点，而不诉诸图像/额外的/相对&绝对定位，我宁愿避免？

解决方案

这是最接近我到你的图像预览，在定位的相对div中，并相应地设置位置

演示

$ b

  < div class =container>< / div> 
< div class =shadow>< / div> 
  

CSS

  .container {
 width：300px; 
 height：200px; 
 margin：50px; 
 background-color：#eeeeee; 
 z-index：1; 
} 
 
 
 .shadow {
 -ms-transform：rotate（2deg）; / * IE 9 * / 
 -webkit-transform：rotate（2deg）; / * Safari和Chrome * / 
 -o-transform：rotate（2deg）; / * Opera * / 
 -moz-transform：rotate（2deg）; / * Firefox * / 
 box-shadow：0 6px 16px -6px black; 
 height：20px; 
 width：300px; 
 position：absolute; 
 top：225px; 
 z-index：-1; 
 left：50px; 
} 
  

I'm trying to create an uneven shadow effect for a website, please see an example below of what I need to achieve:

Unfortunately I don't think this can be done with CSS3, to my knowledge the box-shadow property can only be used to create evenly spread shadows.

However, my knowledge of CSS3/HTML5 isn't great so I was wondering if anybody knows of anyway to achieve this without resorting to images/extra div's/relative & absolute positioning which I would rather avoid?

解决方案

This is the closest what I've came to your image preview, you can wrap these in a positioned relative div and set the positions accordingly

Demo

HTML

<div class="container"></div>
<div class="shadow"></div>

CSS

.container {
    width: 300px;
    height: 200px;
    margin: 50px;
    background-color: #eeeeee;
    z-index: 1;
}


.shadow {
    -ms-transform: rotate(2deg); /* IE 9 */
    -webkit-transform: rotate(2deg); /* Safari and Chrome */
    -o-transform: rotate(2deg); /* Opera */
    -moz-transform: rotate(2deg); /* Firefox */
    box-shadow: 0 6px 16px -6px black;
    height: 20px;
    width: 300px;
    position: absolute;
    top: 225px;
    z-index: -1;
    left: 50px;
}

这篇关于CSS3 / HTML5不平衡框阴影？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！