css 曲线阴影_html/css_WEB-ITnose
程序员文章站
2022-05-31 12:06:17
...
道理很简单,就是通过几个元素阴影叠加,生成我们看到的这种效果,主要是对阴影样式的运用,以及 before 和 after 元素的运用,直接上代码:
html 代码:
CSS3实现曲线阴影和翘边阴影 shadow effect
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; }
版权声明:本文为博主原创文章,未经博主允许不得转载。
上一篇: 如何验证网址是否正确
下一篇: 这种设置是怎么回事呢
推荐阅读
-
CSS3实现曲线阴影和翘边阴影
-
关于网页路径的疑惑_html/css_WEB-ITnose
-
Codeforces Round #156 (Div. 2)-A. Greg's Workout_html/css_WEB-ITnose
-
html 关于ul标签的_html/css_WEB-ITnose
-
background-size 设置背景图片的大小_html/css_WEB-ITnose
-
multiple backgrounds 多重背景_html/css_WEB-ITnose
-
建站新人_html/css_WEB-ITnose
-
折线图怎么做啊?急求!_html/css_WEB-ITnose
-
Codeforces Round #107 (Div. 2)-A. Soft Drinking_html/css_WEB-ITnose
-
css5种实现垂直居中_html/css_WEB-ITnose