CSS3新属性

作者: 胡自鲜 | 来源:发表于2017-09-30 11:48 被阅读0次

css扩展/CSS3
CSS3-目录
CSS3 背景
CSS3 文本效果+字体
CSS3 背景
flex布局.md
CSS背景
CSS3 文本效果
CSS3动画
前端技术前沿5

1.阴影

盒子阴影默认黑色

        第一个值 阴影水平位置
        第二个值 阴影垂直位置
        第三个值 阴影模糊距离
        第四个值 阴影尺寸
        第五个值 阴影颜色
        第六个值 内置阴影 inset
        负值为左和上
        可以设置多个阴影用逗号隔开

box-shadow:0px 0px 10px 20px blue inset,0px 0px 10px 30px pink inset,0px 0px 10px 40px cyan inset;

效果图：

image.png

应用：文字呼吸灯

p{
            font-size:50px;
            color:white;
            width: 400px;
            height: 100px;
            line-height: 100px;
            background: #000;
            font-weight: 900;
            text-align: center;
            animation:mgc 1s infinite alternate;   
        }
        @keyframes mgc{
            0%{
                text-shadow:0 0 10px white,0 -7px 10px deeppink,0 7px 10px deeppink;  
                            
            }
            100%{
                text-shadow:0 0 5px white,0 -7px 10px cyan,0 7px 10px cyan;
            }
        }

image.png

2.倒影

设置倒影方向，以及两张照片之间的间距 below:下 above:上（还可以加上渐变效果）

-webkit-box-reflect: below 10px -webkit-linear-gradient(top,rgba(255,255,255,0),rgba(255,255,255,1));

image.png

3.遮罩（蒙板）

            -webkit-mask-image:url("../img/米老鼠.png");
            -webkit-mask-size:100%;
            -webkit-mask-position:10px 10px;
            -webkit-mask-repeat:no-repeat;

image.png

4.文字描边(内嵌式)

-webkit-text-stroke:1px red;

image.png

多重描边

<style>
        p{
            font-size: 40px;
            position:relative;
            z-index: 0;
            -webkit-text-stroke:1px white;
        }
        p::before{
            content:attr(data-text);
            -webkit-text-stroke:7px yellow;
            position:absolute;
            left:0;
            z-index: -1;
        }
        p::after{
            content:attr(data-text);
            -webkit-text-stroke:4px red;
            position:absolute;
            left:0;
            z-index: -1;
        }
    </style>
</head>
<body>
    <p data-text="多重描边">多重描边</p>
</body>

image.png