zoukankan html css js c++ java

css3卡片阴影效果

　　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是从元素侧边进行投影,但是只渲染盒子内部的,丢弃外部的阴影而已.

查看全文

相关阅读:
OSCP Learning Notes Buffer Overflows(3)
OSCP Learning Notes Buffer Overflows(5)
OSCP Learning Notes Exploit(3)
OSCP Learning Notes Exploit(4)
OSCP Learning Notes Exploit(1)
OSCP Learning Notes Netcat
OSCP Learning Notes Buffer Overflows(4)
OSCP Learning Notes Buffer Overflows(1)
OSCP Learning Notes Exploit(2)
C++格式化输出 Learner

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