Heim >Web-Frontend >HTML-Tutorial >css 曲线阴影_html/css_WEB-ITnose
css 曲线阴影_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:39:261034Durchsuche
道理很简单，就是通过几个元素阴影叠加，生成我们看到的这种效果，主要是对阴影样式的运用，以及 before 和 after 元素的运用，直接上代码：
html 代码：
<!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>
css 样式代码：
/* **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; }
版权声明：本文为博主原创文章，未经博主允许不得转载。
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：图片轮播_html/css_WEB-ITnoseNächster Artikel：使用CSS3画出一个叮当猫_html/css_WEB-ITnose