「前端+鸿蒙」核心技术HTML5+CSS3（十一）

1、CSS3 简介

CSS3 是层叠样式表的最新标准，它引入了许多新特性来增强网页的表现力。CSS3 不仅增强了现有CSS属性的功能，还引入了新的布局方式、动画、渐变、阴影、边框效果等。

2、CSS3 长度单位

CSS3 引入了一些新的单位，包括但不限于：

• vw（视口宽度的百分比）
• vh（视口高度的百分比）
• vmin（视口的较小尺寸的百分比）
• vmax（视口的较大尺寸的百分比）
• rem（根元素的字体大小的倍数）

示例代码:

div {width: 50vw; /* 视口宽度的一半 */margin: 2rem; /* 相对于根元素字体大小的外边距 */
}

3、CSS3 盒子属性

CSS3 对盒子模型进行了扩展，包括 border-radius、box-shadow、background-clip 等属性。

示例代码:

.box {border-radius: 10px;box-shadow: 10px 10px 5px #888888;background-clip: content-box;
}

4、CSS3 背景属性

CSS3 增强了背景属性，如 background-size、background-origin、linear-gradient 等。

示例代码:

body {background: linear-gradient(to right, #ff7e5f, #feb47b);
}

5、CSS3 边框属性

CSS3 为边框增加了新特性，如 border-image、border-radius 等。

示例代码:

.bordered {border-image: url(border.png) 30 round;border-radius: 8px;
}

6、CSS3 文本属性

CSS3 增强了文本的表现力，包括 text-shadow、word-wrap、text-overflow 等。

示例代码:

p