Css curve shadow

Css curve shadow
Let's take a look at what we want to achieve

The principle is very simple. It is to generate the effect we see through the shadow superposition of several elements. It mainly applies the shadow style and the before and after elements, and directly goes to the Code: <喎?http: www.bkjia.com kf ware vc " target="_blank" class="keylink"> VcD4NCjxwPjxzdHJvbmc + aHRtbCC0 + sLro7o8L3N0cm9uZz48L3A + DQo8cHJlIGNsYXNzPQ = "brush: java;"> shadow effect

Css style code:

/*** Author: Qingtian tip; */body, h1, ul, li {margin: 0; padding: 0 ;}body {font-family: Arial; font-size: 20px;} ul, li {list-style: none ;}. wrap {width: 50%; height: 200px; background-color: # fff; margin: 50px auto; position: relative ;}. wrap h1 {line-height: 200px; text-align: center; font-size: 20px ;}. effect {-webkit-box-shadow: 0px 1px 4px rgba (0, 0, 0 ,. 3), 0px 0px 40px rgba (0, 0, 0 ,. 1) inset;-moz-box-shadow: 0px 1px 4px rgba (0, 0, 0 ,. 3), 0px 0px 40px rgba (0, 0, 0 ,. 1) inset;-o-box-shadow: 0px 1px 4px rgba (0, 0, 0 ,. 3), 0px 0px 40px rgba (0, 0, 0 ,. 1) inset;-mz-box-shadow: 0px 1px 4px rgba (0, 0, 0 ,. 3), 0px 0px 40px rgba (0, 0, 0 ,. 1) inset; box-shadow: 0px 1px 4px rgba (0, 0, 0 ,. 3), 0px 0px 40px rgba (0, 0, 0 ,. 1) inset ;}. effect: before ,. effect: after {content:; background-color: red; position: absolute; z-index:-1; left: 10px; right: 10px; top: 50%; bottom: 0px; -webkit-box-shadow: 0px 0px 20px rgba (0, 0, 0 ,. 8);-moz-box-shadow: 0px 0px 20px rgba (0, 0, 0 ,. 8);-o-box-shadow: 0px 0px 20px rgba (0, 0, 0 ,. 8);-mz-box-shadow: 0px 0px 20px rgba (0, 0, 0 ,. 8); box-shadow: 0px 0px 20px rgba (0, 0, 0 ,. 8); border-radius: 50px ;}