css折线效果,CSS3 box-shadow实现纸张的曲线投影效果张鑫旭-鑫空间-鑫生活

展示

代码

CSS代码：

.curved_box {

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;

}

.curved_box:before {

-webkit-transform: skew(-15deg) rotate(-6deg);

-moz-transform: skew(-15deg) rotate(-6deg);

transform: skew(-15deg) rotate(-6deg);

left: 15px;

}

.curved_box:after {

-webkit-transform: skew(15deg) rotate(6deg);

-moz-transform: skew(15deg) rotate(6deg);

transform: skew(15deg) rotate(6deg);

right: 15px;

}

.curved_box:before, .curved_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;

}

HTML代码：

css折线效果,CSS3 box-shadow实现纸张的曲线投影效果张鑫旭-鑫空间-鑫生活相关推荐

Shadow属性和【CSS3 Box Shadow(阴影)效果在线调试工具】
Shadow属性示例向内/向外 | x偏移量 | y偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色 inset 阴影向内 (默认向外) /* x偏移量 | y偏移量 | 阴影颜色 */ b ...
css2.0圆角,CSS圆角效果-CSS3常用属性集合
CSS3使用注意项:早期的firefox chrome 等某些游览器中也实现了部分CSS3,所以为了兼容部分,在CSS3中的编写,需要如此: {-moz-border-radius: 4px; -we ...
CSS3 Box Shadow
语法: box-shadow:1px 2px 3px #FFF; box-shadow:阴影水平偏移值(可取正负值): 阴影垂直偏移值(可取正负值):阴影模糊值:阴影颜色: 兼容性 Firefox支持 ...
CSS3 box-shadow实现纸张的曲线投影效果
一般的投影效果,尤其通过CSS实现的投影效果(无论是CSS3,还是IE滤镜),都是直来直往的.纸张是有卷角的,其投影就是曲面的,如何使用CSS模拟出纸张的卷边曲线投影效果. <div class ...
css眨眼效果,CSS3 精巧的笑脸/眨眼变形动画
CSS 语言: CSSSCSS 确定 body { width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden; backgr ...
html中投影效果图,利用CSS3（box shadow）制作边框投影
应用CSS3的box shadow属性,可以直接在页面中使用投影,增加页面的立体效果. 最终效果预览 HTML 代码: CSS3 Box shadow 任鸟飞网页设计是一个关注于网页设计及网站开发.图 ...
css 阴影效果_CSS阴影效果
css 阴影效果 CSS中的阴影效果 (Shadow Effects in CSS) It is always good to make our web pages stylish and beau ...
[css] 如何使用CSS3的属性设置模拟边框跟border效果一样？
[css] 如何使用CSS3的属性设置模拟边框跟border效果一样? <!DOCTYPE html> <html lang="en"> <head& ...
详解CSS的盒模型(box model) 及 CSS3新增盒模型计算方式box-sizing
W3C规范一般来说,页面中的每一个元素都会形成一个矩形盒子,渲染引擎根据给定的样式确定这个盒子的呈现.通俗的来说,页面的布局就是一个个盒子的排列和摆放.掌握了盒子呈现的本质,布局也就轻而易举. 在 ...

css折线效果,CSS3 box-shadow实现纸张的曲线投影效果张鑫旭-鑫空间-鑫生活

css折线效果,CSS3 box-shadow实现纸张的曲线投影效果张鑫旭-鑫空间-鑫生活相关推荐

最新文章

热门文章

css折线效果,CSS3 box-shadow实现纸张的曲线投影效果 张鑫旭-鑫空间-鑫生活

css折线效果,CSS3 box-shadow实现纸张的曲线投影效果 张鑫旭-鑫空间-鑫生活相关推荐

最新文章

热门文章

css折线效果,CSS3 box-shadow实现纸张的曲线投影效果张鑫旭-鑫空间-鑫生活

css折线效果,CSS3 box-shadow实现纸张的曲线投影效果张鑫旭-鑫空间-鑫生活相关推荐