997
社区成员
发帖
与我相关
我的任务
分享前端CSS-CSS常用属性| “朝闻道”知识分享大赛
这是我参加朝闻道知识分享大赛的第38篇文章。
CSS3 引入了大量的新特性和新属性，这些属性使得网页设计更具互动性和表现力。以下是一些 CSS3 中常用的属性，包括圆角、阴影、渐变、动画和过渡等，以及每个属性的详细用法和示例代码。
1. 圆角边框（border-radius）
border-radius 属性用于为元素设置圆角，适合用于按钮、图片或卡片边角的处理。
语法
border-radius: 10px; /* 所有角为10px圆角 */ border-radius: 10px 5px; /* 左上和右下为10px，右上和左下为5px */ border-radius: 10px 5px 15px 20px; /* 各角不同的圆角半径 */
示例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>圆角边框示例</title>
<style>
.box {
width: 200px;
height: 100px;
background-color: #4CAF50;
border-radius: 20px;
color: white;
text-align: center;
line-height: 100px;
font-size: 18px;
}
</style>
</head>
<body>
<div class="box">圆角示例</div>
</body>
</html>
2. 盒子阴影（box-shadow）
box-shadow 属性用于为元素添加阴影效果，增加立体感。可以设置阴影的偏移、模糊半径、扩展半径和颜色。
语法
box-shadow: offsetX offsetY blurRadius spreadRadius color;
-
offsetX：水平偏移量。 -
offsetY：垂直偏移量。 -
blurRadius：模糊半径。 -
spreadRadius：扩展半径。 -
color：阴影颜色。
示例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>盒子阴影示例</title>
<style>
.box {
width: 200px;
height: 100px;
background-color: #fff;
box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.3);
text-align: center;
line-height: 100px;
font-size: 18px;
border-radius: 10px;
}
</style>
</head>
<body>
<div class="box">盒子阴影</div>
</body>
</html>
3. 文本阴影（text-shadow）
text-shadow 属性用于为文本设置阴影效果，使得文本更有层次感。
语法
text-shadow: offsetX offsetY blurRadius color;
-
offsetX：水平偏移量。 -
offsetY：垂直偏移量。 -
blurRadius：模糊半径。 -
color：阴影颜色。
4. 线性渐变背景（linear-gradient）
linear-gradient 属性用于创建线性渐变的背景效果，适用于背景的平滑过渡。
语法
background: linear-gradient(direction, color-stop1, color-stop2, ...);
-
direction：渐变方向，如to right、45deg等。 -
color-stop：渐变颜色和位置。
5. 2D 变换（transform）
transform 属性可以对元素进行旋转、缩放、移动等 2D 变换操作。
常见的 2D 变换函数
-
translate(x, y)：平移。 -
scale(x, y)：缩放。 -
rotate(angle)：旋转。 -
skew(x-angle, y-angle)：倾斜。
示例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>2D 变换示例</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: #4CAF50;
transition: transform 0.3s ease;
}
.box:hover {
transform: rotate(45deg) scale(1.5);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
6. 背景尺寸（background-size）
background-size 属性用于调整背景图片的尺寸，可以让图片平铺
、覆盖或缩放。
常用值
-
cover：背景图片自动缩放以完全覆盖容器。 -
contain：背景图片自动缩放以适应容器。 -
auto：保持原始尺寸。 -
宽度 高度：指定具体尺寸。
示例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>背景尺寸示例</title>
<style>
.box {
width: 300px;
height: 200px;
background-image: url('./map.png');
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
7. 小结
-
圆角：
border-radius定义圆角效果。 -
盒子阴影：
box-shadow为元素添加阴影。 -
文本阴影：
text-shadow为文本添加阴影。 -
渐变：
linear-gradient创建平滑的颜色过渡。 -
2D 变换：
transform实现元素的移动、旋转、缩放等效果。 -
背景尺寸：
background-size调整背景图片的尺寸。
...全文
请发表友善的回复…
发表回复
