| 标题 | HTML几个特殊的属性标签的使用介绍 |
| 内容 | 在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> |
| 随便看 |
|
在线学习网考试资料包含高考、自考、专升本考试、人事考试、公务员考试、大学生村官考试、特岗教师招聘考试、事业单位招聘考试、企业人才招聘、银行招聘、教师招聘、农村信用社招聘、各类资格证书考试等各类考试资料。