css3和H5 新特性

最新推荐文章于 2023-08-24 11:53:46 发布

Caroline_33

最新推荐文章于 2023-08-24 11:53:46 发布

阅读量713

点赞数

本文链接：https://blog.csdn.net/L_SS133/article/details/82761646

版权

css3:

css3选择器：属性选择器，伪类选择器，伪元素选择器

css3新特性：

1、边框属性：

border-radius：圆角

border-shadow:给边框加阴影 border-show(水平阴影的位置，垂直阴影的位置，阴影的模糊度，阴影的颜色)例子： border-shadow(10px,10px,5px,red);

border-image:加图片的边框

2、背景：

background-size 属性规定背景图片的尺寸。

background-origin 属性规定背景图片的定位区域。

3、文本效果：

text-shadow:给文字加阴影

h1{
  	text-shadow: 10px 10px 10px #FF0000;
}

word-wrap:自动换行

4、css2D转换

transform：

translate()：通过 translate() 方法，元素从其当前位置移动，根据给定的 left（x 坐标）和 top（y 坐标）位置参数
rotate()：通过 rotate() 方法，元素顺时针旋转给定的角度。允许负值，元素将逆时针旋转。例子：transform:rotate(30deg);
scale():通过 scale() 方法，元素的尺寸会增加或减少，根据给定的宽度（X 轴）和高度（Y 轴）参数：
skew():通过 skew() 方法，元素翻转给定的角度，根据给定的水平线（X 轴）和垂直线（Y 轴）参数.例子：值 skew(30deg,20deg) 围绕 X 轴把元素翻转 30 度，围绕 Y 轴翻转 20 度
matrix()：
matrix() 方法把所有 2D 转换方法组合在一起。

matrix() 方法需要六个参数，包含数学函数，允许您：旋转、缩放、移动以及倾斜元素

transform:matrix(0.866,0.5,-0.5,0.866,0,0);

css3D转换：

5、transition过渡

6、动画 @keyframes规则

请用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%。

0% 是动画的开始，100% 是动画的完成。

CSS3新增伪类有那些？

p:first-of-type 选择属于其父元素的首个 元素的每个 元素。
p:last-of-type 选择属于其父元素的最后 元素的每个 元素。
p:only-of-type 选择属于其父元素唯一的 元素的每个 元素。
p:only-child 选择属于其父元素的唯一子元素的每个 元素。 p:nth-child(2) 选择属于其父元素的第二个子元素的每个 元素。 :enabled、:disabled 控制表单控件的禁用状态。
:checked，单选框或复选框被选中。html5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？