css3倒影

<!DOCTYPE html>
<html>
<head>
<title>倒影</title>
<meta charset="utf-8">
<style type="text/css">
.first{
width: 400px;
height: 200px;
margin-left: 500px;
background-image: linear-gradient(to right top,transparent,red);
text-align: center;
line-height: 200px;
font-size: 50px;
/*-webkit-box-reflect可以有三个参数第一个是方向 第二个是位置的偏移量 第三个也可以加个渐变*/
/*above上 below下 left左 ringht右*/
-webkit-box-reflect:left 30px;
}
</style>
</head>
<body>
<div class="first">hello world</div>

</body>
</html>

时间： 2024-10-04 16:48:04

css3倒影的相关文章

一张图教会CSS3倒影

分享 示例图片 在CSS3之前,想要实现示例图片这样的一个倒影效果一般只能通过处理图片的方式,而CSS3问世之后,想要实现这样的效果变得非常简单,只需一个CSS3属性就可以轻松实现了. 这就是今天所要提到的box-reflect属性. 咱们先看看W3C给出的box-reflect语法: box-reflect:none | <direction> <offset>? <mask-box-image>? (?代表可缺省,也就是后俩属性可有可无)<direction&

css3 倒影

说起倒影效果,在传统网页中,我们只能使用photoshop进行事先将倒影设计好,然后导入到网页中,这样不但耗费资源,也阻碍了开发的效率.而 css3新增了Reflections板块,css  Reflections允许css设计倒影. 目前, css  Reflections仅获得webkit引擎的支持,我们只能够在Chrome和Safari浏览器中测试,相信以后会普及的. css3的box-reflect属性,可以使我们进行图片.文字等的倒影设计,具体语法: 语法: box-reflect:包

css3倒影变形旋转缩放

一.倒影 :-webkit-box-reflect: 属性值1:位置 [above , below , left , right] 属性值2:间距 像素值 属性值3:渐变-webkit-box-reflect: -webkit-linear-gradient(top,rgba(0,0,0,0) 20%,rgba(0,0,0,0.6)) 二.变形transform 旋转:rotate(90deg) 变形原点:transform-origin : [percentage | length | lef

css3基础点

文本属性:color,font,text-decoration,text-align,vertical-align,white-space,content CSS3属性(内核前缀) Mozilla 内核   css前缀-moz; WebKit  内核   css前缀-webkit ;(谷歌已换用blink内核) Opera   内核   css前缀 -o ;    (欧朋已换用blink内核) Trident 内核   css前缀 -ms ; border-image  : stretch 拉伸

CSS3主要知识点复习总结+HTML5新增标签

1.显示属性,自身属性,文本属性 推荐样式编写顺序 1 显示属性 :display,list-style,position,float,clear [注意按照横着的顺序] 2 自身属性(合模型):width,height,margin,padding,border,background(第3点)     3 背景:background     4 行高:line-height     5 文本属性:color,font,text-decoration,text-align,vertical-al

css3基础点2

transform:变形种类:的名称(对应的属性值),多个种类之间使用空格分隔.一个()中的属性值之间用逗号分隔. transition 属性是一个简写属性,用于设置四个过渡属性: transition-property  哪个属性实现过渡如:width transition-duration  完成过渡效果需要多少秒/毫秒 transition-timing-function  速度效果的运动曲线,如linear .ase-in .ease . ease-out .ease-in-out .

css3渐变，倒影，多栏目布局

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>css3渐变,倒影,多栏目布局</title> 6 <style> 7 .a,.b,.c,.d,.f{width:100px;height: 30px;} 8 .a{ background: linear-gradient(skyblue,white);border

jquery和CSS3带倒影的3D万花筒旋转动画特效效果演示

<!DOCTYPE html> <html> <head> <title></title> <meta charset='utf-8' /> <script src='js/jquery.js'></script> <style> .pic{ width: 120px; height: 180px; margin: 150px auto 0; position: relative; /*transf

css3渐变、背景、倒影、变形

一.背景切割background-clip 语法:background-clip:border-box | padding-box | content-box: border-box      超出border外的背景割掉 padding-box   超出padding外的背景割掉 content-box    超出content外的背景割掉 二.背景原点(定义起点或中心点)background-origin 语法:background-origin:border-box | padding-b