CSS3学习笔记.pdf

### CSS3 学习笔记知识点总结 #### 一、CSS3 简介 - **定义**：CSS3，即层叠样式表第三版，是Web前端开发中的一个重要组成部分，用于控制网页元素的布局和外观。 - **特性**：与CSS2相比，CSS3提供了更多功能强大的新特性，如动画、过渡、阴影效果等，使得开发者能够更轻松地创建丰富的视觉效果。 - **模块化**：CSS3被拆分为多个模块，每个模块专注于某一方面的功能。这些模块包括但不限于： - **选择器**：扩展了CSS2的选择器功能，增加了更复杂的元素选择方式。 - **盒模型**：提供了新的属性来调整元素的尺寸、填充、边距等。 - **背景和边框**：允许对元素背景和边框进行复杂定制。 - **文字特效**：新增了文字渲染和装饰的选项。 - **2D/3D 转换**：支持二维和三维空间内的元素变换。 - **动画**：直接在CSS中定义动画序列。 - **多列布局**：提供了一种灵活的方式来创建多列布局。 - **用户界面**：增强了用户界面元素的样式控制能力。 #### 二、CSS3 边框 - **边框的重要性**：边框是网页设计中的基本元素之一，它不仅能够美化页面，还能提高用户体验。 - **CSS3提供的边框相关属性**： - **border-radius**：用于创建圆角边框，接受一个或多个数值参数来指定每个角的圆角半径。 - **box-shadow**：用于为元素添加阴影效果，可以通过设置水平偏移、垂直偏移、模糊距离和颜色等参数来控制阴影的外观。 - **border-image**：可以将图像应用于边框，实现更为复杂的设计效果。 ##### 示例代码 - **border-radius** ```html <style> #example1 { border: 2px solid #a1a1a1; padding: 10px 40px; background: #dddddd; width: 300px; border-radius: 25px; } #example2 { border: 2px solid red; padding: 10px; border-radius: 50px 20px; } </style> ``` - **box-shadow** ```html <style> div { width: 300px; height: 100px; background-color: yellow; box-shadow: 10px 10px 5px #152523; } </style> ``` - **border-image** ```html <style> div { border: 15px solid transparent; width: 250px; padding: 10px 20px; } #round { -webkit-border-image: url(border.png) 30 30 round; -o-border-image: url(border.png) 30 30 round; border-image: url(border.png) 30 30 round; } #stretch { -webkit-border-image: url(border.png) 30 30 stretch; -o-border-image: url(border.png) 30 30 stretch; border-image: url(border.png) 30 30 stretch; } </style> ``` #### 三、CSS3 圆角 - **圆角的基本使用**：通过`border-radius`属性，可以轻松地为任何元素添加圆角效果。 - **不同参数的意义**：`border-radius`属性可以接受1到4个值，分别对应元素的四个角（左上、右上、右下、左下）。如果只给定一个值，则所有四个角都会使用该值；如果给定两个值，则第一个值用于左上和右下角，第二个值用于右上和左下角；如果给定三个值，则最后一个值只用于右下角，其余两个值按照两个值的情况分配；如果给定四个值，则按照顺序对应四个角。 - **椭圆形圆角**：当两个值给定时，可以创建椭圆形的圆角效果。 ##### 示例代码 ```html <style> #rcorners1 { border-radius: 25px; background: #8AC007; padding: 20px; width: 200px; height: 150px; } #rcorners2 { border-radius: 25px; border: 2px solid #8AC007; padding: 20px; width: 200px; height: 150px; } #rcorners3 { border-radius: 25px; background: url(/https/download.csdn.net/images/paper.gif); background-position: left top; background-repeat: repeat; padding: 20px; width: 200px; height: 150px; } #rcorners4 { border-radius: 15px 50px 30px 5px; background: #8AC007; padding: 20px; width: 200px; height: 150px; } #rcorners5 { border-radius: 15px 50px 30px; background: #8AC007; padding: 20px; width: 200px; height: 150px; } #rcorners6 { border-radius: 15px 50px; background: #8AC007; padding: 20px; width: 200px; height: 150px; } #rcorners7 { border-radius: 50% / 100%; background: #8AC007; padding: 20px; width: 200px; height: 150px; } </style> ``` 以上内容涵盖了CSS3中的边框和圆角相关的知识点及其实际应用，通过这些特性，开发者可以更加灵活地设计和实现网页布局。