css curve shadow_html/css_WEB-ITnose-HTML Tutorial-php.cn

css curve shadow_html/css_WEB-ITnose

WBOY

Release： 2016-06-24 11:39:26

Original

1045 people have browsed it

Let’s first take a look at the renderings we want to achieve

The reason is very simple, that is, through the superposition of shadows of several elements, we generate The effect you see is mainly the use of shadow styles, as well as the use of before and after elements. Directly enter the code:

html code:

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>CSS3实现曲线阴影和翘边阴影</title>    <link rel="stylesheet" type="text/css" href="css/style.css"></head><body>    <div class="wrap effect">        <h1>shadow effect</h1>    </div></body></html>

Copy after login

css style code:

/* **author:青天诀; */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; }

Copy after login

Copyright statement: This article is an original article by the blogger and may not be reproduced without the blogger's permission.