9、CSS3新增样式（边框圆角、阴影、形变）

jasmine_qiqi

已于 2022-04-05 14:08:34 修改

阅读量254

点赞数 1

分类专栏： CSS 文章标签：前端 css html

于 2022-04-05 14:01:40 首次发布

本文链接：https://blog.csdn.net/weixin_45065754/article/details/123968424

版权

CSS 专栏收录该内容

17 篇文章 1 订阅

订阅专栏

1、CSS3新增样式

CSS3新增样式
边框圆角	`border-radius`
阴影	`shadow`
形变（旋转、缩放、位移）	`transform: rotate() scale() translate()`

2、边框圆角（`border-radius`）

`border-radius`属性	值
一个值	圆角的半径，当为50%时，盒子变成一个圆
两个值	左上右下、右上左下
四个值	左上、右上、右下、左下

3、边框阴影（`box-shadow`）

box-shadow值：x轴、y轴、模糊半径、颜色

4、形变（旋转、缩放、位移）

形变类型	值
旋转	`rotate(45deg)`：旋转45度
缩放	`scale(1.5)`：放大1.5倍
位移	`translate(50%,50%)`：x轴移动50%，y轴移动50%
多个样式	`transform: rotate(45deg) scale(1.5) translate(100%, 50%)`

4.1、用translate(-50%,-50%)写垂直水平居中

		/* 垂直水平居中 */
		.box {
			position: absolute;
			/* 左上角那个点水平居中 */
			top: 50%;
			left: 50%;
			/* x、y轴向左上角移动，把中心点回归到盒子中间 */
			transform: translate(-50%, -50%);
		}

5、源代码

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		.box {
			width: 100px;
			height: 100px;
			border: 1px solid black;
			/* 1、border-radius:圆角的半径，圆形：50% */
			/* 四个值：左上、右上、右下、左下 */
			/* 两个值：左上右下、右上左下 */
			border-radius: 50%;
			/* 2、box-shadow:x轴、y轴、模糊半径、颜色 */
			box-shadow: 5px 5px 5px #333;
			/* 3、形变 */
			/* rotate(45deg):旋转45度 */
			transform: rotate(45deg);
			/* scale(1.5)：放大1.5倍 */
			transform: scale(1.5);
			/* translate(50%,50%)：x轴移动50%，y轴移动50% */
			transform: translate(50%, 50%);
			/* 多个形变 */
			transform: rotate(45deg) scale(1.5) translate(100%, 50%);
		}

		/* 垂直水平居中 */
		.box {
			position: absolute;
			/* 左上角那个点水平居中 */
			top: 50%;
			left: 50%;
			/* x、y轴向左上角移动，把中心点回归到盒子中间 */
			transform: translate(-50%, -50%);
		}
	</style>
</head>

<body>
	<div class="box"></div>
</body>

</html>