翘边阴影

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
list-style: none;
}
.wrap{
width: 50%;
height: 200px;
margin: 50px auto;
}
h1{
font-size:40px;
text-align: center;
line-height: 200px;
}
.imgShadow{
background: rgba(255, 255, 255, 1);
position:relative;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
.imgShadow:after, .imgShadow:before{
position: absolute;
z-index: -1;
content: "";
top: 50%;
right: 10px;
bottom: 0;
left: 10px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
-webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
-moz-box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
border-radius: 100px/10px;
}
</style>
<style>
.box{
position: relative;
width: 320px;
height: 220px;
background: #fff;
clear: both;
margin: 100px auto;
border:1px solid #ccc;
box-shadow: 0 0 4px rgba(0, 0, 0, 0.3),0 0 40px rgba(0, 0, 0, 0.5) inset;
-webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2),0 0 40px rgba(0, 0, 0, 0.1) inset;
-moz-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2),0 0 40px rgba(0, 0, 0, 0.1) inset;
}
.box img{
width: 300px;
height: 200px;
margin: 10px;
display: block;
}
.box:after{
content: "";
position: absolute;
width: 90%;
height: 80%;
left: 5%;
bottom: 10%;
background: transparent;
z-index: -1;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6);
-webkit-box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6);
-moz-box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6);
-webkit-transform: skew(-16deg) rotate(-10deg);
}
.box:before{
content: "";
position: absolute;
width: 90%;
height: 80%;
left: 5%;
bottom: 10%;
background: transparent;
z-index: -1;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6);
-webkit-box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6);
-moz-box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6);
-webkit-transform: skew(16deg) rotate(10deg);
}
</style>
</head>
<body>
<div class="wrap imgShadow">
<h1>Hello World</h1>
</div>
<div class="box">
<img src="img.jpg" height="200" width="300" >
</div>
</body>
</html>

时间： 2025-01-05 03:23:30

翘边阴影的相关文章

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

关于C3翘边阴影的demo

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>翘边阴影</title> /*翘边阴影样式*/ <style> .demo { display: inline-block; *display: inline; width: 200px; height: 248px; margin: 20px; background-color:

【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

CSS3 实现特殊阴影 (学习笔记)

学习来源:慕课网http://www.imooc.com/view/240 先看效果图↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ HTML结构 1 <body> 2 <div class="wrap effect"> 3 <!-- effect类:是阴影类,其他元素也可以使用 --> 4 <h1>Shadow Effect</h1> 5 </div> 6 <ul class="box"&g

css 曲线阴影

先看一下我们要实现的效果图 道理很简单,就是通过几个元素阴影叠加,生成我们看到的这种效果,主要是对阴影样式的运用,以及 before 和 after 元素的运用,直接上代码: html 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS3实现曲线阴影和翘边阴影</title> <link

box-shadow技巧分享

box-shadow box-shadow在定义里是这么说的:"box-shadow 属性向框添加一个或多个阴影." 是的,和他的名字一样,这个属性固然是用来制造阴影效果让页面更有立体感的. 语法: box-shadow: h-shadow v-shadow blur spread color inset;其中属性分别为:h-shadow:必需.水平阴影的位置.允许负值.v-shadow:必需.垂直阴影的位置.允许负值.blur:可选.模糊距离.spread:可选.阴影的尺寸.colo

CSS3知识点整理&amp;&amp;一些demo

css3能做什么 响应式开发的基础,然后能实现一些酷炫的效果咯. 以下案例纯css3实现,一点都没用js (入门简单,但是水很深) 叮当猫纯用css3做出         http://codepen.io/airen/pen/icFba         如果大家感兴趣,大家可以去慕课网上找大漠老师的课学习. 边框 1.圆角效果 border-radius:border-radius: 5px 4px 3px 2px; /* 四个半径值分别是左上角.右上角.右下角和左下角,顺时针 */ bord

CSS--阴影效果

1.曲线阴影: 曲线阴影的实现原理是通过阴影的叠加效果产生的.即一个主元素设置阴影后,在主元素下面再添加一个副元素.使副元素和主元素重合,且副元素为一个弧形元素.此时主元素和副元素的阴影效果叠加产生曲线阴影. 第一步: 为主元素添加内部阴影,v和h方向的大小都设置为0,但是模糊半径设置的要较大,从而实现主元素内部的阴影效果. 第二步: 此时副元素需要变换的属性有:添加到主元素层级的下层,通过z-index来实现:在主元素后面或者前面添加副元素:副元素需要变换为弧形:border-radius:1

CSS实现曲面阴影效果

知道大家在做项目的时候遇见很绚丽的设计图后会怎么做.有一些设计图会经常使用阴影效果看上去更加立体,一般情况下像我这种懒人直接就切图了.压根就没有想着去研究一下代码怎么实现. 后来我们的设计稿总是改啊改啊,***简直是烦死我了,他要是改了图我就要正版的切图更换.所以我决定研究一下这个东西,其实我们是可以实现的哦! 如图所示: 上面的效果就是平时写项目最典型的效果了,做设计的小伙伴肯定知道PS分分钟搞定,但是代码实现起来我们也可以么?---告诉他们:必须可以!哈哈o(∩_∩)o:说了大话那就下点功夫