### CSS3 样式知识点详解
#### CSS3 背景属性
在 CSS3 中，开发者可以使用一系列增强的功能来定制网页元素的背景效果。这些功能不仅提供了更强大的控制能力，还增强了网页的设计美感。
##### background
- **描述**：在一个声明中设置所有的背景属性，包括颜色、图像、重复方式等。
- **示例**：
```css
div {
background: url(image.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
```
##### background-attachment
- **描述**：设置背景图像是否固定或者随着页面的其余部分滚动。
- **示例**：
```css
body {
background-image: url('image.jpg');
background-attachment: fixed;
}
```
##### background-color
- **描述**：设置元素的背景颜色。
- **示例**：
```css
p {
background-color: #f5f5f5;
}
```
##### background-image
- **描述**：设置元素的背景图像。
- **示例**：
```css
.header {
background-image: url('header-image.jpg');
}
```
##### background-position
- **描述**：设置背景图像的开始位置。
- **示例**：
```css
.hero {
background-image: url('hero-image.jpg');
background-position: center top;
}
```
##### background-repeat
- **描述**：设置是否及如何重复背景图像。
- **示例**：
```css
.pattern {
background-image: url('pattern.png');
background-repeat: repeat-x;
}
```
##### background-clip
- **描述**：规定背景的绘制区域。
- **版本**：CSS3
- **示例**：
```css
.box {
background-color: blue;
padding: 20px;
background-clip: padding-box;
}
```
##### background-origin
- **描述**：规定背景图片的定位区域。
- **版本**：CSS3
- **示例**：
```css
.image-container {
background-image: url('image.jpg');
background-origin: content-box;
}
```
##### background-size
- **描述**：规定背景图片的尺寸。
- **版本**：CSS3
- **示例**：
```css
.cover-image {
background-image: url('cover.jpg');
background-size: cover;
}
```
#### CSS3 边框属性
边框是网页设计中不可或缺的一部分，CSS3 提供了更多样化的边框样式和控制选项。
##### border
- **描述**：在一个声明中设置所有的边框属性。
- **示例**：
```css
.box {
border: 2px solid red;
}
```
##### border-bottom
- **描述**：在一个声明中设置所有的下边框属性。
- **示例**：
```css
table td {
border-bottom: 1px dotted gray;
}
```
##### border-bottom-color
- **描述**：设置下边框的颜色。
- **示例**：
```css
.bottom-border {
border-bottom: 1px solid #ff0000;
}
```
##### border-bottom-style
- **描述**：设置下边框的样式。
- **示例**：
```css
.divider {
border-bottom: 2px dashed #000;
}
```
##### border-bottom-width
- **描述**：设置下边框的宽度。
- **示例**：
```css
.thick-border {
border-bottom: 4px solid #000;
}
```
##### border-color
- **描述**：设置四条边框的颜色。
- **示例**：
```css
.square {
border: 2px solid #000;
}
```
##### border-left
- **描述**：在一个声明中设置所有的左边框属性。
- **示例**：
```css
.left-border {
border-left: 1px solid #000;
}
```
##### border-left-color
- **描述**：设置左边框的颜色。
- **示例**：
```css
.sidebar {
border-left: 1px solid #ccc;
}
```
##### border-left-style
- **描述**：设置左边框的样式。
- **示例**：
```css
.line {
border-left: 1px dotted #000;
}
```
##### border-left-width
- **描述**：设置左边框的宽度。
- **示例**：
```css
.thick-line {
border-left: 2px solid #000;
}
```
##### border-right
- **描述**：在一个声明中设置所有的右边框属性。
- **示例**：
```css
.right-border {
border-right: 1px solid #000;
}
```
##### border-right-color
- **描述**：设置右边框的颜色。
- **示例**：
```css
.divider-right {
border-right: 1px solid #000;
}
```
##### border-right-style
- **描述**：设置右边框的样式。
- **示例**：
```css
.dash-right {
border-right: 1px dashed #000;
}
```
##### border-right-width
- **描述**：设置右边框的宽度。
- **示例**：
```css
.thick-right {
border-right: 2px solid #000;
}
```
##### border-style
- **描述**：设置四条边框的样式。
- **示例**：
```css
.frame {
border-style: solid;
}
```
##### border-top
- **描述**：在一个声明中设置所有的上边框属性。
- **示例**：
```css
.top-border {
border-top: 1px solid #000;
}
```
##### border-top-color
- **描述**：设置上边框的颜色。
- **示例**：
```css
.top-line {
border-top: 1px solid #000;
}
```
##### border-top-style
- **描述**：设置上边框的样式。
- **示例**：
```css
.top-dash {
border-top: 1px dashed #000;
}
```
##### border-top-width
- **描述**：设置上边框的宽度。
- **示例**：
```css
.thick-top {
border-top: 2px solid #000;
}
```
##### border-width
- **描述**：设置四条边框的宽度。
- **示例**：
```css
.thick-frame {
border-width: 2px;
}
```
##### outline
- **描述**：在一个声明中设置所有的轮廓属性。
- **示例**：
```css
button:focus {
outline: 2px solid #000;
}
```
##### outline-color
- **描述**：设置轮廓的颜色。
- **示例**：
```css
input:focus {
outline-color: #ff0000;
}
```
##### outline-style
- **描述**：设置轮廓的样式。
- **示例**：
```css
textarea:focus {
outline-style: dashed;
}
```
##### outline-width
- **描述**：设置轮廓的宽度。
- **示例**：
```css
select:focus {
outline-width: 3px;
}
```
##### border-bottom-left-radius
- **描述**：定义边框左下角的形状。
- **版本**：CSS3
- **示例**：
```css
.rounded-corner {
border-bottom-left-radius: 50px;
}
```
##### border-bottom-right-radius
- **描述**：定义边框右下角的形状。
- **版本**：CSS3
- **示例**：
```css
.rounded-corner {
border-bottom-right-radius: 50px;
}
```
##### border-image
- **描述**：简写属性，设置所有 `border-image-*` 属性。
- **版本**：CSS3
- **示例**：
```css
.image-border {
border-image: url('border.png') 30 stretch;
}
```
##### border-image-outset
- **描述**：规定边框图像区域超出边框的量。
- **版本**：CSS3
- **示例**：
```css
.image-border {
border-image-outset: 10px;
}
```
##### border-image-repeat
- **描述**：图像边框是否应平铺(`repeated`)、铺满(`rounded`) 或拉伸(`stretched`)。
- **版本**：CSS3
- **示例**：
```css
.image-border {
border-image-repeat: round;
}
```
##### border-image-slice
- **描述**：规定图像边框的向内偏移。
- **版本**：CSS3
- **示例**：
```css
.image-border {
border-image-slice: 10;
}
```
##### border-image-source
- **描述**：规定用作边框的图片。
- **版本**：CSS3
- **示例**：
```css
.image-border {
border-image-source: url('border.png');
}
```
##### border-image-width
- **描述**：规定图片边框的宽度。
- **版本**：CSS3
- **示例**：
```css
.image-border {
border-image-width: 20px;
}
```
##### border-radius
- **描述**：简写属性，设置所有四个 `border-*-radius` 属性。
- **版本**：CSS3
- **示例**：
```css
.rounded {
border-radius: 10px;
}
```
##### border-top-left-radius
- **描述**：定义边框左上角的形状。
- **版本**：CSS3
- **示例**：
```css
.rounded-corner {
border-top-left-radius: 50px;
}
```
##### border-top-right-radius
- **描述**：定义边框右下角的形状。
- **版本**：CSS3
- **示例**：
```css
.rounded-corner {
border-top-right-radius: 50px;
}
```
#### Box 属性
除了上述的背景和边框属性外，CSS3 还引入了一系列用于控制元素布局的新属性。
##### overflow-x
- **描述**：如果内容溢出了元素内容区域，是否对内容的左右边缘进行裁剪。
- **版本**：CSS3
- **示例**：
```css
.scrollable {
overflow-x: auto;
}
```
##### overflow-y
- **描述**：如果内容溢出了元素内容区域，是否对内容的上下边缘进行裁剪。
- **版本**：CSS3
- **示例**：
```css
.scrollable {
overflow-y: scroll;
}
```
##### overflow-style
- **描述**：规定溢出元素的首选滚动方法。
- **版本**：CSS3
- **示例**：
```css
.scrollable {
overflow-style: scroll;
}
```
##### rotation
- **描述**：围绕由 `rotation-point` 属性定义的点对元素进行旋转。
- **版本**：CSS3
- **示例**：
```css
.rotated {
rotation: 90deg;
}
```
##### rotation-point
- **描述**：定义距离上左边框边缘的偏移点。
- **版本**：CSS3
- **示例**：
```css
.rotated {
rotation-point: 50% 50%;
}
```
#### Color 属性
除了基本的颜色设置外，CSS3 还支持更高级的颜色处理。
##### color-profile
- **描述**：允许使用源的颜色配置文件的默认以外的规范。
- **版本**：CSS3
- **示例**：
```css
img {
color-profile: sRGB;
}
```
##### opacity
- **描述**：规定元素的不透明级别。
- **版本**：CSS3
- **示例**：
```css
.transparent {
opacity: 0.5;
}
```
##### rendering-intent
- **描述**：允许使用颜色配置文件渲染意图的默认以外的规范。
- **版本**：CSS3
- **示例**：
```css
img {
rendering-intent: absolute-colorimetric;
}
```
#### Content for Paged Media 属性
对于打印或其他分页媒体，CSS3 提供了特定的属性来优化输出。
##### bookmark-label
- **描述**：规定书签的标记。
- **版本**：CSS3
- **示例**：
```css
@page :left {
bookmark-label: "Chapter";
}
```
##### bookmark-level
- **描述**：规定书签的级别。
- **版本**：CSS3
- **示例**：
```css
@page :left {
bookmark-level: 2;
}
```
以上介绍了 CSS3 中关于背景、边框以及一些额外的布局和颜色处理相关的属性，这些属性的使用能够极大地提高网页的视觉效果和用户体验。
