Css curve shadow and css Curve
- 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:
Html code:
<! DOCTYPE html>
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 ;}
Copyright Disclaimer: This article is an original article by the blogger and cannot be reproduced without the permission of the blogger.