css3-文件阴影

作者: AssertDo | 来源:发表于2019-08-26 14:19 被阅读0次

css3-文件阴影
css3-阴影、背景尺寸、渐变
css3-背景、阴影、盒模型
css3-边框-阴影，圆角，渐变，透明
第六章系统数据文件和信息
css3-变形
css3-对盒使用阴影-盒模型（3）
Android ListView 相关的一些设置
Axure7.0绘制弥散阴影风格界面（附源文件）
如果系统使用阴影文件，那么如何取得加密口令？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .demo{
            width: 600px;
            padding: 30px;
            background-color: #666;
            margin:20px auto;
            text-align: center;
            font:bold 80px/100% "微软雅黑";
            color: #fff;
        }
        /*添加阴影 text-shadow:offsetX offsetY blur color*/
        .demo1{
            text-shadow: -2px -2px 5px red;
        }
        .demo2{
            text-shadow: 0px 0px 30px #fff;
        }
        /*多层阴影效果*/
        .demo3{
            text-shadow: 0px 0px 30px #fff,0px 0px 50px red,0px 0px 70px #fff;
        }
        .demo4{
            color: black;
            text-shadow: 0px 1px 0px #fff;
        }
        /*浮雕立体效果*/
        .demo5{
            color: #fff;
            text-shadow: -1px -1px 0px #eee,-2px -2px 0px #ddd,-3px -3px 0px #ccc;
        }
        .demo6{
            color: transparent;
            text-shadow: 0px 0px 8px hsla(30,100%,30%,1);
        }
    </style>
</head>
<body>
<div class="demo demo1">精选优质木浆</div>
<div class="demo demo2">精选优质木浆</div>
<div class="demo demo3">精选优质木浆</div>
<div class="demo demo4">精选优质木浆</div>
<div class="demo demo5">精选优质木浆</div>
<div class="demo demo6">精选优质木浆</div>
<div class="demo demo7">精选优质木浆</div>
</body>
</html>