「这是我参与2022首次更文挑战的第19天，活动详情查看：2022首次更文挑战」
1、CSS3 边框
1.1 border-image
border-image: source slice width outset repeat|initial|inherit;
| 值 | 描述 |
|---|---|
| border-image-source | 用于指定要用于绘制边框的图像的位置 |
| border-image-slice | 图像边界向内偏移 |
| border-image-width | 图像边界的宽度 |
| border-image-outset | 用于指定在边框外部绘制 border-image-area 的量 |
| border-image-repeat | 用于设置图像边界是否应重复（repeat）、拉伸（stretch）或铺满（round）。 |
1.2 box-shadow
box-shadow: h-shadow v-shadow blur spread color inset;
| 值 | 说明 |
|---|---|
| h-shadow | 必需的。水平阴影的位置。允许负值 |
| v-shadow | 必需的。垂直阴影的位置。允许负值 |
| blur | 可选。模糊距离 |
| spread | 可选。阴影的大小 |
| color | 可选。阴影的颜色。在CSS颜色值寻找颜色值的完整列表 |
| inset | 可选。从外层的阴影（开始时）改变阴影内侧阴影 |
| eg: |
box-shadow: 10px 10px 10px 5px #888888;
1.3 border-radius
- 四个值: 第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角。
- 三个值: 第一个值为左上角, 第二个值为右上角和左下角，第三个值为右下角
- 两个值: 第一个值为左上角与右下角，第二个值为右上角与左下角
- 一个值： 四个圆角值相同 eg:
<body>
<div id="a"></div>
<div id="b"></div>
<div id="c"></div>
<div id="d"></div>
</body>
div{
display: inline-block;
float: left;
margin: 10px;
width: 200px;
height: 100px;
background-color: limegreen;
}
#a{
border-radius: 25px;
}
#b{
border-radius: 25px 20px;
}
#c{
border-radius: 25px 20px 10px;
}
#d{
border-radius: 25px 20px 10px 5px;
}
2、CSS3 背景
新的背景属性：
| 属性 | 描述 |
|---|---|
| background-clip | 规定背景的绘制区域。 |
| background-origin | 规定背景图片的定位区域。 |
| background-size | 规定背景图片的尺寸。 |
3、CSS3 渐变
线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向 径向渐变（Radial Gradients）- 由它们的中心定义
3.1 Linear Gradients
1、使用线性
background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
direction:to right; to bottom right; eg:
background-image: linear-gradient(to bottom right,#ff0000,#00ff00);
2、使用角度
background-image: linear-gradient(angle, color-stop1, color-stop2);
angle:-90deg; 90deg; eg:
background-image: linear-gradient(45deg, red, yellow);
3、重复渐变repeating-linear-gradient
background-image: repeating-linear-gradient(red, yellow 10%, green 20%);
3.2 Radial Gradients
background-image: radial-gradient(shape size at position, start-color, ..., last-color);
shape 参数定义了形状。它可以是值 circle 或 ellipse。其中，circle 表示圆形，ellipse 表示椭圆形。默认值是 ellipse。 eg:
/* 径向渐变 - 颜色结点均匀分布*/
background-image: radial-gradient(red, yellow, green);
/* 径向渐变 - 颜色结点不均匀分布*/
background-image: radial-gradient(red 5%, yellow 15%, green 60%);
/* 形状为圆形的径向渐变*/
background-image: radial-gradient(circle, red, yellow, green);
/* 一个重复的径向渐变*/
background-image: repeating-radial-gradient(red, yellow 10%, green 15%);
4、CSS3 文本
4.1 text-align-last
设置如何对齐最后一行或紧挨着强制换行符之前的行
text-align-last: auto|left|right|center|justify|start|end|initial|inherit;
4.2 text-overflow
规定当文本溢出包含元素时发生的事情
text-overflow: clip|ellipsis|string;
| 值 | 描述 |
|---|---|
| clip | 修剪文本 |
| ellipsis | 显示省略符号来代表被修剪的文本。 |
| string | 使用给定的字符串来代表被修剪的文本。(谷歌不兼容) |
4.3 word-break
规定非中日韩文本的换行规则
word-break: normal|break-all|keep-all;
| 值 | 描述 |
|---|---|
| normal | 使用浏览器默认的换行规则。 |
| break-all | 允许在单词内换行 |
| keep-all | 只能在半角空格或连字符处换行 |
4.4 word-wrap
允许对长的不可分割的单词进行分割并换行到下一行
word-wrap: normal|break-word;
| 值 | 描述 |
|---|---|
| normal | 只在允许的断字点换行（浏览器保持默认处理） |
| break-word | 在长单词或 URL 地址内部进行换行。 |
5、css3字体
@font-face
{
font-family: myFirstFont;
src: url(sansation_light.woff);
}
div
{
font-family:myFirstFont;
}
6、CSS3 2D 转换
transform属性
translate()方法，根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。
transform: translate(10px, 10px);
rotate()方法，在一个给定度数顺时针旋转的元素。负值是允许的，这样是元素逆时针旋转。
transform: rotate(30deg);
scale()方法，该元素增加或减少的大小，取决于宽度（X轴）和高度（Y轴）的参数：
transform: scale(1.5,2);
skew() 方法 transform:skew( [,]); 包含两个参数值，分别表示X轴和Y轴倾斜的角度，如果第二个参数为空，则默认为0，参数为负表示向相反方向倾斜。 skewX();表示只在X轴(水平方向)倾斜。 skewY();表示只在Y轴(垂直方向)倾斜。
transform: skew(30deg,20deg);
