当前位置：首页 > news >正文

Web开发 -前端部分-CSS3新特性

news 2025/7/17 22:28:33

1 CSS概述

2 CSS3私有前缀

3 CSS3的长度单位

代码实现：

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}.box1 {width: 200px;height: 200px;background-color: skyblue;}/* 视口宽度的百分比 viewport width *//* 视口高度的百分比 viewport height *//* 可以根据视口的变化而变化 */.box2 {width: 50vw;height: 20vh;background-color: blue;}/* vmax 取视口宽度 视口高度 两者之间的较大值作为标准 *//* vmin 取视口宽度 视口高度 两者之间的较小值作为标准 */</style>
</head><body><div class="box1">像素</div><div class="box2">vw和vh</div></body></html>

图形化展示：

4 新增颜色设置

5 新增选择器

6 新增盒子模型属性

1 box-sizing 怪异盒子模型

代码实现：

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box1 {/* 内容的宽高 */width: 200px;height: 200px;background-color: skyblue;padding: 5px;border: 5px solid black;/* 将宽高改为整体的宽高 */box-sizing: border-box;}</style>
</head><body><div class="box1"></div>
</body></html>

图形化展示：

2 resize 调整盒子大小

代码实现：

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box1 {width: 200px;height: 200px;background-color: skyblue;overflow: auto;/* 水平方向上的长度调节 */resize: horizontal;/* 垂直方向上的长度调节 */resize: vertical;/* 两个方向都可以调节 */resize: both;}</style>
</head><body><div class="box1"></div>
</body></html>

3 box-shadow 盒子阴影

代码实现：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box1 {width: 300px;height: 300px;background-color: green;font-size: 40px;margin: 0 auto;margin-top: 100px;/* 参数：2个 水平 垂直 两个方向上的阴影 */box-shadow: 10px 10px;/* 参数：3个 水平 垂直 阴影颜色  */box-shadow: 10px 10px black;/* 参数：3个 水平 垂直 阴影模糊程度  */box-shadow: 10px 10px 10px;/* 参数：4个 水平 垂直 阴影模糊程度 阴影颜色 */box-shadow: 10px 10px 10px orange;/* 参数：5个 水平 垂直 阴影模糊程度 阴影外延 阴影颜色 */box-shadow: 10px 10px 10px 0px orange;/* 参数：6个 水平 垂直 阴影模糊程度 阴影外延 阴影颜色 内阴影*/box-shadow: 10px 10px 10px 0px orange inset;}</style></head><body><div class="box1">盒子阴影</div>
</body></html>

4 opacity 盒子不透明度

代码实现：

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box1{width: 300px;height: 300px;background-color: orange;font-size: 40px;/* 0为完全透明 1为透明 */opacity: 0.3;}</style></head>
<body><div class="box1">盒子不透明性</div></body>
</html>

7 新增背景属性

1 bcakground-origin背景原点

代码实现:

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<style>.box1 {background-color: skyblue;width: 300px;height: 300px;margin: 0 auto;margin-top: 20px;padding: 50px;border: 50px dashed rgba(255, 0, 0, 0.4);font-size: 30px;background-image: url(../../HTML/QQ图片20240919174729.jpg);background-repeat: no-repeat;/* 从哪一个区域开始铺图片 */background-origin: padding-box; }
</style><body><div class="box1">背景</div></body></html>

2 background-clip 背景裁剪

代码实现：

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<style>.box1 {background-color: skyblue;width: 300px;height: 300px;margin: 0 auto;margin-top: 20px;padding: 50px;border: 50px dashed rgba(255, 0, 0, 0.4);font-size: 30px;background-image: url(../../HTML/QQ图片20240919174729.jpg);background-repeat: no-repeat;/* 从哪一个区域开始铺图片 */background-origin: padding-box; /* 超出这个区域的内容不呈现 */background-clip: padding-box;}
</style><body><div class="box1">背景</div></body></html>

3 background-size 背景尺寸

代码实现：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box1 {width: 400px;height: 400px;border: 1px solid black;background-image: url(../../HTML/QQ图片20240919174729.jpg);background-repeat: no-repeat;/* 将图片完整的呈现出来 */background-size: contain;}</style></head><body><div class="box1">背景属性</div>
</body></html>

4 background-xxx 复合属性

代码实现：

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<style>.box1 {width: 400px;height: 400px;margin: 0 auto;margin-top: 20px;padding: 50px;border: 50px dashed rgba(255, 0, 0, 0.4);font-size: 30px;/* background: 背景颜色 背景url 是否重复 位置/大小 原点 裁剪方式; */background: skyblue url(../../HTML/QQ图片20240919174729.jpg) no-repeat 10px 10px / 500px 500px border-box content-box;background-size: contain;}
</style><body><div class="box1">背景</div></body></html>

图形化展示：