CSS3新属性
2017-09-30 本文已影响0人
胡自鲜
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
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
