来源：自学PHP网 时间：2014-12-15 15:58 作者： 阅读:次
[导读] 在HTML中还有几个容易让我们遗忘的特殊的属性标签，下面为大家详细介绍下这几个属性在各个浏览器中的使用，为了能达到更好的兼容，建议web人员抽空看看...
|
在HTML中还有几个容易让我们遗忘的特殊的属性标签，下面为大家详细介绍下这几个属性在各个浏览器中的使用，为了能达到更好的兼容，建议web人员抽空看看
1.transform:rotate(45deg) 2.border-top-left-radius 该属性允许您向元素添加圆角边框 3.border-radius 该属性允许您向元素添加圆角边框 4.box-shadow 属性向框添加一个或多个阴影 5.text-shadow 属性向文本设置阴影 6.transition 为了更好的兼容各个浏览器,需要加上前缀. -o- /*Opera浏览器*/ -webkit- /*Webkit内核浏览器 Safari and chrome*/ -ms- /*IE 9*/ -moz- /*Firefox浏览器*/ 1.transform:rotate(45deg) 通过transform属性使对象旋转,其中(45deg)是旋转的角度 transform:rotate(45deg); -ms-transform:rotate(45deg); /*IE 9*/ -o-transform:rotate(45deg); /*Opera浏览器*/ -webkit-transform:rotate(45deg); /*Webkit内核浏览器 Safari and chrome*/ -moz-transform:rotate(45deg); /*Firefox浏览器*/ 2.border-top-left-radius border-radius 该属性允许您向元素添加圆角边框 前者可以选择添加圆角边框的位置 border-top-left-radius,border-top-right-radius,border-bottom-left-radius,border-bottom-right-radius border-top-left-radius 该属性允许您向元素添加圆角边框,与border-radius一样,只是可以控制需要添加圆角边框的位置. 3.box-shadow属性向框添加一个或多个阴影,text-shadow属性向文本设置阴影 box-shadow: h-shadow || v-shadow || blur || spread || color || inset; 属性:水平阴影的位置 || 垂直阴影的位置 || 模糊距离 || 阴影尺寸 || 阴影颜色 || 将外部阴影(outset)改为内部阴影 box-shadow:1px 1px 3px #292929; text-shadow: h-shadow || v-shadow || blur || color; text-shadow: 0px -1px 0px #000; 4.transition property || duration || timing-function || delay 规定设置过渡效果的 CSS 属性的名称 || 规定完成过渡效果需要多少秒或毫秒 || 规定速度效果的速度曲线 || 定义过渡效果何时开始 目前所有浏览器都不支持 transition 属性。 ease 默认。动画以低速开始，然后加快，在结束前变慢. ease-in 动画以低速开始. ease-out 动画以低速结束 ease-in-out 动画以低速开始和结束 transition:background 5s ease; ONE EG: 复制代码 代码如下:<html> <head> <style> div { width:100px; height:100px; background:blue; transition:width 2s; -moz-transition:width 2s; /* Firefox 4 */ -webkit-transition:width 2s; /* Safari and Chrome */ -o-transition:width 2s; /* Opera */ } div:hover { width:300px; } </style> </head> <body> <div></div> <p>请把鼠标指针移动到蓝色的 div 元素上，就可以看到过渡效果。</p> <p><b>注释：</b>本例在 Internet Explorer 中无效。</p> </body> </html> TWO EG: 复制代码 代码如下:<html> <head> <style> div { width:100px; height:100px; background:blue; transition-property:background; transition-duration:5s; /* Firefox 4 */ -moz-transition-property:background; -moz-transition-duration:5s; /* Safari and Chrome -webkit-transition-property:background; -webkit-transition-duration:5s;*/ transition:background 5s ease; /* Opera */ -o-transition-property:background; -o-transition-duration:5s; } div:hover { background:red; } </style> </head> <body> <div></div> <p>请把鼠标指针移动到蓝色的 div 元素上，就可以看到过渡效果。</p> <p><b>注释：</b>本例在 Internet Explorer 中无效。</p> </body> </html> |
自学PHP网专注网站建设学习,PHP程序学习,平面设计学习，以及操作系统学习
京ICP备14009008号-1@版权所有www.zixuephp.com
网站声明：本站所有视频，教程都由网友上传，站长收集和分享给大家学习使用，如由牵扯版权问题请联系站长邮箱904561283@qq.com
