请问css3能实现如下图的效果吗，不考虑IE

html-css020

请问css3能实现如下图的效果吗，不考虑IE,第1张

完全可以，不过效果和ps出来的还是会有差距的。

<style>

.gaguang{width:300pxtext-align:center}

.box{width: 300px

height: 100px

background: #3B4C2C

border: 4px solid white

box-shadow: 0 0 10px #333

border-radius: 10px

opacity: 0.8}

.gg{width: 400px

height: 200px

border-radius: 45%

margin-top: -265px

z-index: 1

background: white

opacity: 0.1

margin-left: -45px}

.wz{z-index:0position:absolutetop:40pxcolor:#fffwidth:300px}

</style>

<div class="gaguang">

<div class="box"></div>

<div class="wz">这里是内容,这里是内容,</div>

<div class="gg"></div>

</div>

css实现图片有一定角度进入图层，开发的时候有个图片用背景图要旋转一定角度如果只给.question添加背景，通过transfromrotate肯定是会影响文字的展示，所以把背景图放到伪类中进行旋转就可以解决这个问题了。