CSS3框阴影到div的一半 [英] CSS3 Box shadow to half of the div

问题描述

我想将框阴影应用于div的一半。我在Google上搜索了很多，但失败了。
下面是简单框阴影的代码。

 < style type =text / css> 
 div {
 width：200px; 
 height：200px; 
 text-align：center; 
 background-color：gray; 
 margin：auto; 
 font-size：30px; 
 box-shadow：0 100px 5px 5px; 
} 
< / style> 
 
< div>有时失去一场战斗，你会找到一种赢得战争的新方法。< / div> 
  

编码：

>

必需：

提前感谢...

解决方案

您可以将 box-shadow 应用于其：：伪元素后this。

< pre class =snippet-code-css lang-css prettyprint-override> div {width：200px; height：200px; text-align：center;背景颜色：灰色margin：auto; font-size：30px; position：relative;} div：after {position：absolute; content：''; width：100％;身高：50％; / *原始高度的一半* / top：0; left：0; box-shadow：0 100px 5px 5px; z-index：-1;}

 < div&有时失去战斗，你会找到一种赢得战争的新方法。< / div>  

I want to apply the box shadow to just half of the div. I searched a lot in Google but failed. Here is the code for simple box shadow.

<style type="text/css">
    div{
        width: 200px;
        height: 200px;
        text-align: center;
        background-color: gray;
        margin: auto;
        font-size: 30px;
        box-shadow: 0 100px 5px 5px;
    }
</style>

<div>Sometimes by losing a battle you find a new way to win the war.</div>

Coded:

Required:

Barrels of thanks in advance...

解决方案

You could apply the box-shadow to its :after :pseudo-element to achieve this.

div {
  width: 200px;
  height: 200px;
  text-align: center;
  background-color: gray;
  margin: auto;
  font-size: 30px;
  position: relative;
}
div:after {
  position: absolute;
  content: '';
  width: 100%;
  height: 50%; /* Half of the original height */
  top: 0;
  left:0;
  box-shadow: 0 100px 5px 5px;
  z-index: -1;
}

<div>Sometimes by losing a battle you find a new way to win the war.</div>

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