码迷,mamicode.com
首页 > Web开发 > 详细

css3卡片阴影效果

时间:2016-11-07 02:33:32      阅读:774      评论:0      收藏:0      [点我收藏+]

标签:问题   style   otto   创建   tom   doctype   har   rgb   margin   

  1.css3阴影用到的知识点:阴影box-shadow和插入:after before

  HTML部分:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div class="box case-content"> 
            <h1>卡片阴影效果</h1>
        </div>
    </body>
</html>

  CSS部分:

        <style type="text/css">
            .box {
                width: 70%;
                height: 200px;
                margin: 50px auto;
                background-color: #fff;
            }
            .box h1 {
                font-size: 20px;
                line-height: 200px;
                text-align: center;
            }
            .case-content {
                position: relative;
                -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;
                box-shadow: 0 1px 4px rgba(0,0,0,0.3),0 0 40px rgba(0,0,0,0.1) inset;
                -o-box-shadow:0 1px 4px rgba(0,0,0,0.3),0 0 40px rgba(0,0,0,0.1) inset;
            }
            
            .case-content:before ,.case-content:after{
                z-index: -1;
                content: "";
                background-color: #foo;
                position: absolute;
                top: 50%;
                bottom: 0;
                left: 10px;
                right: 10px;
                -webkit-box-shadow: 0 0 20px rgba(0,0,0,0.8);
                -moz-box-shadow: 0 0 20px rgba(0,0,0,0.8);
                box-shadow: 0 0 20px rgba(0,0,0,0.8);
                -o-box-shadow:0 0 20px rgba(0,0,0,0.8);
                border-radius: 100px/10px;
            }

  备注:

1. css卡片阴影效果用到两个伪元素:after、before.

(1)、“伪元素”,顾名思义。它创建了一个虚假的元素,并插入到目标元素内容之前或之后;

(2)、伪元素如果没有设置“content”属性,伪元素是无用的;

浏览器支持:before 和 :after 伪元素栈,像这样:

  • Chrome 2+,
  • Firefox 3.5+ (3.0 had partial support),
  • Safari 1.3+,
  • Opera 9.2+,
  • IE8+ (with some minor bugs),
  • 几乎所有的移动浏览器。
  • 唯一真正的问题是没有获得支持的(不用奇怪)IE6和IE7。

2.inset用法:

(1)、inset是从元素侧边进行投影,但是只渲染盒子内部的,丢弃外部的阴影而已.

css3卡片阴影效果

标签:问题   style   otto   创建   tom   doctype   har   rgb   margin   

原文地址:http://www.cnblogs.com/yyy6/p/6036761.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!