html5s标签,HTML几个特殊的属性标签

超、凢脫俗 2022-10-10 11:22 153阅读 0赞

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

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

\{

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;

\}

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

**注释：**本例在 Internet Explorer 中无效。

TWO eg:

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;

\}

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

**注释：**本例在 Internet Explorer 中无效。

发表评论取消回复

表情：

评论列表（有 0 条评论，153人围观）

还没有评论，来说两句吧...

相关阅读

相关 html5新增的标签或者属性

会有一点多，耐心看看把一、语义化标签 <header></header> <nav></nav> <main> <arti

Love The Way You Lie/ 2023年07月18日 05:49/ 0 赞/ 23 阅读

相关 html-标题标签、水平线标签和特殊字符

　　标题标签　　　　 <h1></h1> <h2></h2> ...... <h6></h6> 　　　　从h1到h6，大小是依次变小，同时会自动换行　　水平线标签

超、凢脫俗/ 2023年06月03日 05:52/ 0 赞/ 15 阅读

相关 html5s标签,HTML几个特殊的属性标签

以下几项属性对于浏览器的兼容很不好. 1.transform:rotate(45deg) 2.border-top-left-radius 该属性允许您向元素添加圆角边框

超、凢脫俗/ 2022年10月10日 11:22/ 0 赞/ 154 阅读

相关 html5 div标签属性,HTML:
标签

HTML: 标签 HTML 标签定义了HTML文档中的通用容器，该容器通常用于对元素进行分组。此标签通常也称为元素。在线示例文档中创建了三个标签：示例

ゞ浴缸里的玫瑰/ 2022年10月06日 06:57/ 0 赞/ 425 阅读

相关（html入门）HTML 属性+标签+段落

HTML 属性属性为 HTML 元素提供附加信息。 HTML 标签可以拥有属性。属性提供了有关 HTML 元素的更多的信息。属性总是以名称/值对的形式出现，比

柔情只为你懂/ 2022年09月02日 12:45/ 0 赞/ 236 阅读

相关 html5新增标签和属性

<!DOCTYPE HTML> <html> <head> <title> New Document </title> <me

末蓝、/ 2022年07月20日 15:11/ 0 赞/ 291 阅读

相关 Html5 标签

1.新的文档类型声明(DTD) HTML 5的DTD声明为: <!doctype html> <!DOCTYPE html> 都是正确的，因为HTML

叁歲伎倆/ 2022年06月14日 07:50/ 0 赞/ 223 阅读

相关 HTML5新增标签属性

关于h5 兜兜转转终于学完CSS开始接h5了！其实h5没有大家想的那么复杂！我们之前学的pc端就是以h5的标准来的只是那些标签是 html4.01之前就有的！我们后

傷城~/ 2022年04月03日 02:45/ 0 赞/ 419 阅读

相关 Html的标签和属性

HTML标签用途熟练使用的标签 [万变不离W3C祖宗;][W3C] <table> <thead> <tr> <th>标签</th> <th

拼搏现实的明天。/ 2022年03月09日 05:08/ 0 赞/ 306 阅读

相关 html 标签全局属性

accesskey:规定激活元素的快捷键。 <a href="http://www.w3school.com.cn/css/" accesskey="c">C

你的名字/ 2021年07月24日 15:10/ 0 赞/ 473 阅读