关于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: #fff;
		    border: 1px solid #eee;
		    -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 60px rgba(0, 0, 0, 0.06) inset;
		    -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;
		    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;
		    position: relative;
		    *zoom: 1;
}
/* 用伪类before和after在里面添加transform属性*/
.demo:before {
    -webkit-transform: skew(-15deg) rotate(-6deg);
    -moz-transform: skew(-15deg) rotate(-6deg);
    transform: skew(-15deg) rotate(-6deg);
    left: 15px;
}
.box:after {
    -webkit-transform: skew(15deg) rotate(6deg);
    -moz-transform: skew(15deg) rotate(6deg);
    transform: skew(15deg) rotate(6deg);
    right: 15px;
}

.demo:before, .box:after {
    width: 70%;
    height: 55%;
    content: ‘ ‘;
    -webkit-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
    position: absolute;
    bottom: 10px;
    z-index: -1;
}
		</style>
	</head>
	<body>
		<div class="demo">
			<h3>翘边阴影-我的demo</h3>
		</div>
	</body>
</html>

效果图如下：

　　

时间： 2024-10-10 03:01:17

关于C3翘边阴影的demo的相关文章

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

翘边阴影

<!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; }

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

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

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

CSS实现曲面阴影效果

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

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

CSS--阴影效果

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