金沙国际会员登录

将想法与焦点和您一起共享

HTML几个特殊的属性标签的使用介绍发布者:本站     时间:2019-12-20 10:12:53

在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>