HTML特殊的属性标签介绍

作者:kgmucom   在线用户:29
风之恋奇迹私服技术网是一家提供最新互联网编程技术网站

在中有着很多属性,但是有几个是我们非常容易忘记的特殊的属性标签,那么现在我们就一起去看看HTML特殊的属性标签介绍,感兴趣的朋友们一起来参考参考吧。

以下几项属性对于浏览器的兼容很不好.

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:
 

复制代码
代码如下:
 






 

 

 

 

 

请把鼠标指针移动到蓝色的 div 元素上,就可以看到过渡效果。

 

 

注释:本例在 Internet Explorer 中无效。

 

 

 

 


TWO EG:

 

 

复制代码
代码如下:
 

 

 


 

 

 

 

 

 

请把鼠标指针移动到蓝色的 div 元素上,就可以看到过渡效果。

 

注释:本例在 Internet Explorer 中无效。

以上就是HTML特殊的属性标签介绍,为了HTML特殊的属性标签能达到更好的兼容,建议web人员要牢记哦。 提供最全面的奇迹sf开服版本和最新的奇迹私服开服技术信息,奇迹私服文库让每一位奇迹私服玩家找到自己需要的版本技术文章

上一篇:详解XHTML网页教程

下一篇:CSS实现的html背景色渐变的实例代码

请发表您的评论