今天小编跟大家讲解下有关HTML几个特殊的属性标签的使用介绍 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关HTML几个特殊的属性标签的使用介绍 的相关资料，希望小伙伴们看了有所帮助。
以下几项属性对于浏览器的兼容很不好. 1.transform:rotate(45deg) 2.border-top-left-radius 该属性允许您向元素添加圆角边框 3.border-radius 该属性允许您向元素添加圆角边框 4.box-shadow 属性向框添加一个或多个阴影 5.text-shadow 属性向文本设置阴影 6.transition 为了更好的兼容各个浏览器,需要加上前缀. -o- -webkit- -ms- -moz- 1.transform:rotate(45deg) 通过transform属性使对象旋转,其中(45deg)是旋转的角度 transform:rotate(45deg); -ms-transform:rotate(45deg); -o-transform:rotate(45deg); -webkit-transform:rotate(45deg); -moz-transform:rotate(45deg); 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; -webkit-transition:width 2s; -o-transition:width 2s; } 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; -moz-transition-property:background; -moz-transition-duration:5s; transition:background 5s ease; -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>来源：爱蒂网
