5分钟让你掌握CSS3阴影,反射,逐渐的小技巧。
两。首先,在不做处理的情况下设置两个文本
三。在第一个div字体中添加阴影
文字阴影:5px 5px 10px红;
文字阴影:5px 5px 5px红,5px - 5px 10px黄;
框阴影:类似于文本阴影,但它只是一个框,如div
文本阴影:{颜色(x)x轴(x偏移量)y轴(y偏移量)模糊半径(模糊)},{(颜色)x轴(模糊),轴(x),模糊半径(H)},前两个值可以是负的,第三个不能做负数,它可以是0(无效果)。
四。向第一个div添加一个反射
WebKit的反映:在10px盒;
左右方向上的距离(上)。
注意:反射不占用文档流空间,层次结构的层次比标签(宽高度)的文档流反转要高。
五,添加渐变
背景图像:WebKit的线性梯度(左,红0%,黄50%);
第一个百分比是从0%到这个百分比,这是所有的颜色。最后一个百分比是从这个百分比到100%。这是颜色。如果百分比是逐渐的,边界线也是一样的。
六。所有的代码:
xml代码将内容复制到剪贴板。
CSS3
div {
字体大小:30px;
宽度:300px;
身高:100px;
背景图像:WebKit的线性梯度(左,红0%,黄50%);
渐变
颜色:蓝色;
WebKit的反映:在10px盒;
反射
文字阴影:5px 5px 10px红;
阴影
}
跨{
背景:水;
}
我会翻转!哈哈哈!
反射不能保持的位置被占用!反射不能保持的位置被占用!
反射不能保持的位置被占用!反射不能保持的位置被占用!
以上5分钟让你掌握CSS3阴影,反射和梯度技术,即萧边分享你的全部内容。我希望能给你一个参考,希望你能支持它。