css 曲线阴影

  • 先看一下我们要实现的效果图

道理很简单,就是通过几个元素阴影叠加,生成我们看到的这种效果,主要是对阴影样式的运用,以及 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;
}

版权声明:本文为博主原创文章,未经博主允许不得转载。

时间: 2024-10-03 22:38:40

css 曲线阴影的相关文章

css3照片墙+曲线阴影

css3照片墙+曲线阴影 最近在学习jquery,晚上想复习下以前学过的知识,看到网上有关于css3照片墙的,感觉挺好玩的,就做了做.(以下图片均来自网络) 一.css3照片墙 html部分: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>css3照片墙</title> <link rel="stylesheet"

CSS3实现曲线阴影和翘边阴影

预备知识 DIV+CSS基础 圆角:border-radius 2D变幻:transform:skew && rotate 伪类::before 和 :after 代码 HTML结构代码很简单,CSS内含注释,图片小伙伴们自己替换哈! HTML <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>CSS3

【CSS3】---曲线阴影翘边阴影

效果图 代码 index <!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title>box-shadow</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="wrap effe

css边框阴影

<style type="text/css">.mydiv{width:250px;height:auto;border:#909090 1px solid;background:#fff;color:#333;filter:progid:DXImageTransform.Microsoft.Shadow(color=#909090,direction=120,strength=4);/*ie*/-moz-box-shadow: 2px 2px 10px #909090;/

兼容多浏览器的CSS文字阴影

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

CSS定位阴影

  <html>   <head>   <title>文字阴影效果</title>   <style type="text/css">   <!--   body{   margin:15px;   font-family:黑体;   font-size:60px;   font-weight:bold;   }   #block1{   position:relative;   z-index:1;   }   #bl

css.盒子阴影

div{ width:100px; height:100px; font-size:212px; background-color:red; border-radius: 15px 24px 33px 42px; /* 四个半径值分别是左上角.右上角.右下角和左下角,顺时针 */  } <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-

html/css实现阴影蒙版覆盖原网页并显示浮框的功能

在提供用户修改资料/密码等功能的时候,往往希望给用户这样的使用体验,在不跳转,不弹框的情况下完成对这些功能的操作. 这可以通过一种效果来实现,在同一页面下阴影覆盖整个当前网页并使得原网页中元素无法使用,同时让可以使用的特定的修改框浮于阴影之上 如下面的效果示例: 思路是设置一个div作为body元素的直接子元素,让其width和height均为100%,然后让它在一开始处于隐藏状态,而中间修改框页同样在一开始隐藏. 此外,两者均使用绝对定位position:absolute;以使其脱离html的

CSS 边框 阴影 效果

下面将css实现阴影效果,以便需要朋友们,直接上代码 #shadow1{width: 200px;height: 100px;color: white; box-shadow: 5px -5px 1px 1px #000;-webkit-box-shadow:5px -5px 1px 1px #000;-moz-box-shadow:5px 5px 1px 1px #000;    /* For IE 8 */    -ms-filter: progid:DXImageTransform.Mic