Question

我有一篇＆＃34;文章＆＃34;标签，我想让它有一个花哨的投影角落。我想避免使用图像，如果可能的话，纯粹使用CSS。

这是一个看起来像我想要实现的东西的例子： http://oi59.tinypic.com/2pq7y1e.jpg

这是我的代码：

<div class="mainContent">
    <div class="contentWrapper">
        <article class="content">

        </article>
    </div>
<div>

到目前为止我的CSS：

.mainContent{
background: #F8F8F8;
width: 100%;
position: absolute;
margin-top:500px;}

.contentWrapper {
margin: auto;
width: 1000px;
padding-top: 50px;}

.content {
margin-bottom: 50px;
padding: 40px;
border: #999 1px solid;
line-height: 25px;
color: #4D4D4D;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
background-color: #FFF;
box-shadow: 0px 0px 1px 1px #e1e1e1 inset, 0px 23px 30px -33px #4D4D4D;}

Answer 1

将下面的css添加到<div class="shadow lifted"></div>

这样的简单div中

.shadow {
position:relative;
width:40%;    
padding:1em; 
margin:2em 10px 4em; 
background:#fff;
-webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
   -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
        box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}

.shadow:before,
.shadow:after {
content:"";
position:absolute; 
z-index:-2;
}


.lifted {
-moz-border-radius:4px; 
     border-radius:4px;
}

.lifted:before,
.lifted:after { 
bottom:15px;
left:10px;
width:50%;
height:20%;
max-width:300px;
-webkit-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);   
   -moz-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
        box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
-webkit-transform:rotate(-3deg);    
   -moz-transform:rotate(-3deg);   
    -ms-transform:rotate(-3deg);   
     -o-transform:rotate(-3deg);
        transform:rotate(-3deg);
}

.lifted:after {
right:10px; 
left:auto;
-webkit-transform:rotate(3deg);   
   -moz-transform:rotate(3deg);  
    -ms-transform:rotate(3deg);  
     -o-transform:rotate(3deg);
        transform:rotate(3deg);
}

DEMO

Answer 2

box-shadow：


阴影的水平偏移

阴影的垂直偏移

模糊半径（可选）

传播半径（可选）

http://css-tricks.com/snippets/css/css-box-shadow/

这是box-shadow可以做的CodePen。

您还可以查看this post on css-tricks.com。

Answer 3

您可以通过编写几行代码来实现阴影效果。不需要太多代码行。

对于所有浏览器支持，您可以使用名为Modernizr的JavaScript库。

首先检查 DEMO 。

#box {
  position: relative;
  width: 60%;
  background: #ddd;
  border-radius: 4px;
  padding: 2em 1.5em;
  color: rgba(0,0,0, .8);
  text-shadow: 0 1px 0 #fff;
  line-height: 1.5;
  margin: 60px auto;
}
#box:before, #box:after {
  z-index: -1; 
  position: absolute; 
  content: "";
  bottom: 15px;
  left: 10px;
  width: 50%; 
  top: 80%;
  max-width:300px;
  background: rgba(0, 0, 0, 0.7); 
  box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
  transform: rotate(-3deg);
}
#box:after {
  transform: rotate(3deg);
  right: 10px;
  left: auto;
}

我怎么能制作花哨的投影？

3 个答案: