H5 CSS3 学习心得总结

最新推荐文章于 2021-11-13 20:16:15 发布

原创最新推荐文章于 2021-11-13 20:16:15 发布 · 1.6k 阅读

0 ·

CC 4.0 BY-SA版权

本文总结了H5的新标签，如图形、音频、视频和区段等，并探讨了CSS3的重要特性，包括圆角、阴影、渐变、文本效果、2D和3D转换以及过渡和动画的应用，旨在分享学习经验和提升Web开发技能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

H5标签

<canvas>标签定义图形
<audio>定义音频内容
<video>定义视频
<article>定义独立内容
<aside>定义侧边栏
<bdi>脱离元素的设置方向
<commnd>定义命令按钮
<dialog open>我是弹框
<head>头标签
<footer>尾部标签
<nav>定义导航链接部分
<section>定义文档中的区段
<time>定义日期或时间
<wbr>换行符

CSS3总结

border-radius圆角属性
border-shadow盒子阴影
border-image边框图片
background-image设置背景图片
background-size设置背景图片大小
background-origin定义背景图片位置
background-clip背景裁减属性
Linear Gradients线性渐变- 向下/向上/向左/向右/对角方向
Radial Gradients径向渐变- 由它们的中心定义
text-shadow文本阴影
box-shadow盒子阴影
text-overflow文本超出属性
word-wrap规定文本的换行规则
word-break规定非中日韩文本的换行规则
font-family规定字体格式
font-weight规定字体粗细
font-size规定字体大小
font-style规定字体样式

2D转换
transform：translate( ) 平移 rotate（）旋转 scale（）伸缩 skew( )倾斜
transform-origin 改变元素的中心

3D转换
transform-style：preserve-3d 转2D动画为3D

过渡动画
transation：属性名称延迟时间执行时间执行方式运动方式

transation: div 1s 2s linear infinite

3D动画

`animation`： 动画名称  延迟时间 执行时间 执行方式  运动方式

 animation:	animate 2s 5s linear/ease-in  infinite
 
@keyframes 动画名称 {
		from{
	
	}
		to{

	}
}

@keframes 动画名称{
		0%{

	}
		100%{


	}
}