css3新增属性

最新推荐文章于 2023-03-25 20:11:22 发布

「已注销」

最新推荐文章于 2023-03-25 20:11:22 发布

阅读量389

点赞数

文章标签：前端

本文链接：https://blog.csdn.net/qq_43661006/article/details/123782970

版权

1、CSS3新增属性

1、CSS3边框,圆角边框，边框图片

border-radius , border-shadow , border-image

2、CSS渐变

线性渐变：向下/向上/向左向右/对角方向
径向渐变：由它们的中心定义

.wrapper{
				width:100px;
				height: 100px;
				border:1px solid green;
				background-image: linear-gradient(red,green);
			}

3、css3 2D转换

.item{
		width:100px;
		height:100px;
		border:1px solid black;
		transform: rotate(45deg);  //2D旋转45度
}
.item2{
		width:100px;
		height:100px;
		border:1px solid black;
		transform: translate(100px,100px);   //从当前位置左下偏移100像素
}

translate()方法，根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。
rotate()方法，在一个给定度数顺时针旋转的元素。

4、css3 过渡

transfrom: all 3s;

5、css3 动画

动画是使元素从一种样式逐渐变化为另一种样式的效果。

@keyframes 规则是创建动画。

@keyframes 规则内指定一个 CSS 样式和动画将逐步从目前的样式更改为新的样式。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>动画</title>
		<style type="text/css">
			div{
				width:100px;
				height:100px;
				animation: myfirst 5s;
				
			}
			@keyframes myfirst{
				from{ background-color: red;}
				to{background-color: green;}
			}
		</style>
	</head>
	<body>
		<div></div>
	</body>
</html>

6、 box-sizing

box-sizing: border-box; 可以让盒子不会因为设置了边框或内边距后撑大盒子

7、弹性盒子（常用的五个属性）

flex-direction 属性

flex-direction 属性指定了弹性子元素在父容器中的位置。

语法
flex-direction: row | row-reverse | column | column-reverse
flex-direction的值有:

row：横向从左到右排列（左对齐），默认的排列方式。
row-reverse：反转横向排列（右对齐，从后往前排，最后一项排在最前面。
column：纵向排列。
column-reverse：反转纵向排列，从后往前排，最后一项排在最上面。

justify-content 属性

内容对齐（justify-content）属性应用在弹性容器上，把弹性项沿着弹性容器的主轴线（main axis）对齐。

align-items 属性

align-items 设置或检索弹性盒子元素在侧轴（纵轴）方向上的对齐方式。

flex -wrap 属性

指定弹性盒子的子元素的换行方式
wrap：换行
nowrap ：不换行

flex-content 属性

设置各个行的对齐方式

8、多媒体查询

针对不同媒体类型可以定制不同的样式规则。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title></title> 
<style>
body {
    background-color: pink;
}

@media screen and (max-width: 480px) {
    body {
        background-color: lightgreen;
    }
}
</style>
</head>
<body>

<h1>重置浏览器窗口查看效果！</h1>
<p>如果媒体类型屏幕的可视窗口宽度小于 480 px ，背景颜色将改变。</p>

</body>
</html>