零散属性
outline: 轮廓线 例：outline: #00ff00 dotted thick; (设置轮廓线的颜色、样式、宽度)
| 值 | 描述 |
|---|---|
| none | 去掉聚焦边框颜色以及所有轮廓线设置 |
| outline-color | 边框的颜色。 |
| outline-style | 规定边框的样式。 |
| outline-width | 规定边框的宽度。 |
| 值 | 描述 |
|---|---|
| none | 默认。定义无轮廓。 |
| dotted | 定义点状的轮廓。 |
| dashed | 定义虚线轮廓。 |
| solid | 定义实线轮廓。 |
| double | 定义双线轮廓。双线的宽度等同于 outline-width 的值。 |
| groove | 定义 3D 凹槽轮廓。此效果取决于 outline-color 值。 |
| ridge | 定义 3D 凸槽轮廓。此效果取决于 outline-color 值。 |
| inset | 定义 3D 凹边轮廓。此效果取决于 outline-color 值。 |
| outset | 定义 3D 凸边轮廓。此效果取决于 outline-color 值。 |
| 值 | 描述 |
|---|---|
| thin | 规定细轮廓。 |
| medium | 默认。规定中等的轮廓。 |
| thick | 规定粗的轮廓。 |
| length | 允许您规定轮廓粗细的值。单位“PX”。 |
white-space: 设置如何处理元素内的空白。例：white-space: normal (默认，自动换行)
所有参数如下：
| 值 | 描述 |
|---|---|
| normal | 默认。空白会被浏览器忽略。 |
| pre | 所有空格和换行都会被浏览器保留。 |
| nowrap | 文本不会换行 |
| pre-wrap | 保留空白符序列，但是正常地进行换行。 |
| pre-line | 合并空白符序列，但是保留换行符。 |
| inherit | 规定应该从父元素继承 white-space 属性的值。 |
padding: 设置文字与边框之间的间距。 例：padding: 10px; 亦可：padding-left: 10px; (上边距设置10px)
position: 规定元素的定位类型。 例positon: relative; (变为相对定位的元素)
| 值 | 描述 |
|---|---|
| absolute | 生成绝对定位的元素，相对于 relative 定位以外的第一个父元素进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 |
| fixed | 生成固定定位的元素，相对于浏览器窗口进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 |
| relative | 生成相对定位的元素，相对于其正常位置进行定位。 因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。 |
| static | 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。 |
top、bottom、left、right: 上下左右移动标签。需要与position联动使用。 例：top: 10px;
z-index: 元素的堆叠顺序，数值越大越靠上。需要与position联动使用。例：z-index: 1;
display: none; 隐藏标签，其他值如下：
| 值 | 描述 |
|---|---|
| none | 此元素不会被显示。 |
| block | 此元素将显示为块级元素，此元素前后会带有换行符。显示隐藏 |
| inline | 默认。此元素会被显示为内联元素，元素前后没有换行符。 |
| inline-block | 行内块元素。（CSS2.1 新增的值） |
| list-item | 此元素会作为列表显示。 |
| run-in | 此元素会根据上下文作为块级元素或内联元素显示。 |
| compact | CSS 中有值 compact，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。 |
| marker | CSS 中有值 marker，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。 |
| table | 此元素会作为块级表格来显示（类似 <table>），表格前后带有换行符。 |
| inline-table | 此元素会作为内联表格来显示（类似 <table>），表格前后没有换行符。 |
| table-row-group | 此元素会作为一个或多个行的分组来显示（类似 <tbody>）。 |
| table-header-group | 此元素会作为一个或多个行的分组来显示（类似 <thead>）。 |
| table-footer-group | 此元素会作为一个或多个行的分组来显示（类似 <tfoot>）。 |
| table-row | 此元素会作为一个表格行显示（类似 <tr>）。 |
| table-column-group | 此元素会作为一个或多个列的分组来显示（类似 <colgroup>）。 |
| table-column | 此元素会作为一个单元格列显示（类似 <col>） |
| table-cell | 此元素会作为一个表格单元格显示（类似 <td> 和 <th>） |
| table-caption | 此元素会作为一个表格标题显示（类似 <caption>） |
| inherit | 规定应该从父元素继承 display 属性的值。 |
visibility: 规定元素是否可见。例：visibility: hidden;
| 值 | 描述 |
|---|---|
| hidden | 隐藏 |
| visible | 显示隐藏 |
| display | 无法使用transition动画显示， 只能用opacity透视代替 |
| visibility | 可以使用transition动画显示 |
opacity: 设置透明度。范围在0-1之间。例：opacity: 0.5;
word-spacing: 单词之间的间距。例：word-spacing: 10px;
letter-spacing: 字符之间的距离。例：letter-spacing: 10px;
direction: 设置文字方向。例：direction: ltr;
| 值 | 描述 |
|---|---|
| ltr | 默认。文本方向从左到右。 |
| rtl | 文本方向从右到左。 |
overflow: hidden; 隐藏溢出。
border-radius: 设置边框的弧度。例：border-radius: 10px;
box-sizing: border-box; 将padding和border的长度也纳入总长度。改为IE盒子类型。
box-shadow: 元素阴影。例：box-shadow: 0 10px 8px red;
最多填写六个值，分别表示为：
| 值 | 描述 |
|---|---|
| h-skewing（必要） | 阴影在水平方向的偏移，负数是向左偏移，正数是向右偏移，单位为“px”。 |
| v-skewing（必要） | 阴影在垂直方向的偏移，负数是向上偏移，正数是向下偏移，单位为“px”。 |
| blur（可选） | 阴影的“模糊距离”或“模糊程度”，单位为“px”。 |
| spread（可选） | 阴影的扩展范围，若将“blur”设为“0”，该值则相当于一个可以进行位置偏移但不具备“outline-offset”的“outline”，单位为“px”。 |
| color（可选） | 阴影的颜色，支持Web技术中的常用颜色模式：“颜色英文单词”、“HEX”、“RGBa”、“HSLa”。 |
| inset（可选） | 将默认向外的阴影方向改为向内。 |
clear: both; 清除左右浮动
clip-path: 裁剪图形。例：clip-path: polygon(50% 0, 25% 50%, 75% 50%);
| 值 | 描述 |
|---|---|
| circle | 圆 |
| ellipse | 椭圆 |
| inset | 圆角 |
| polygon | 多边形，以左上角为圆点 |
| 圆 | clip-path: circle(50% at 50% 50%); |
| 椭圆 | clip-path: ellipse(25% 40% at 50% 50%); |
| 矩形 | clip-path: inset(5% 20% 15% 10%); |
| 三角形 | clip-path: polygon(50% 0%, 0% 100%, 100% 100%); |
| 菱形 | clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); |
| 梯形 | clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%); |
| 平行四边形 | clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%); |
| 五边形 | clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%); |
| 六边形 | clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); |
| 七边形 | clip-path: polygon(50% 0%, 90% 20%, 100% 60%, 75% 100%, 25% 100%, 0% 60%, 10% 20%); |
| 八边形 | clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%); |
| 斜角 | clip-path: polygon(20% 0%, 80% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0% 20%); |
| 槽口 | clip-path: polygon(0% 15%, 15% 15%, 15% 0%, 85% 0%, 85% 15%, 100% 15%, 100% 85%, 85% 85%, 85% 100%, 15% 100%, 15% 85%, 0% 85%); |
| 左箭头 | clip-path: polygon(40% 0%, 40% 20%, 100% 20%, 100% 80%, 40% 80%, 40% 100%, 0% 50%); |
| 右箭头 | clip-path: polygon(0% 20%, 60% 20%, 60% 0%, 100% 50%, 60% 100%, 60% 80%, 0% 80%); |
| 星星 | clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); |
| 十字架 | clip-path: polygon(10% 25%, 35% 25%, 35% 0%, 65% 0%, 65% 25%, 90% 25%, 90% 50%, 65% 50%, 65% 100%, 35% 100%, 35% 50%, 10% 50%); |
| 叉号 | clip-path: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%); |
| 对话框 | clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%); |
calc: 计算公式。例：calc: (100px-10px); *支持 “+”，“ - ”，“*”，“/” 运算
cursor: 要显示的光标的类型。例：cursor: pointer; 设置鼠标形状为一只手。
| 值 | 描述 |
|---|---|
| url | 需使用的自定义光标的 URL。 注释：请在此列表的末端始终定义一种普通的光标，以防没有由 URL 定义的可用光标。 |
| default | 默认光标（通常是一个箭头） |
| auto | 默认。浏览器设置的光标。 |
| crosshair | 光标呈现为十字线。 |
| pointer | 光标呈现为指示链接的指针（一只手） |
| move | 此光标指示某对象可被移动。 |
| e-resize | 此光标指示矩形框的边缘可被向右（东）移动。 |
| ne-resize | 此光标指示矩形框的边缘可被向上及向右移动（北/东）。 |
| nw-resize | 此光标指示矩形框的边缘可被向上及向左移动（北/西）。 |
| n-resize | 此光标指示矩形框的边缘可被向上（北）移动。 |
| se-resize | 此光标指示矩形框的边缘可被向下及向右移动（南/东）。 |
| sw-resize | 此光标指示矩形框的边缘可被向下及向左移动（南/西）。 |
| s-resize | 此光标指示矩形框的边缘可被向下移动（南）。 |
| w-resize | 此光标指示矩形框的边缘可被向左移动（西）。 |
| text | 此光标指示文本。 |
| wait | 此光标指示程序正忙（通常是一只表或沙漏）。 |
| help | 此光标指示可用的帮助（通常是一个问号或一个气球）。 |
perspective: 定义 3D 元素距视图的距离，以像素计。该属性允许您改变 3D 元素查看 3D 元素的视图。 *当元素定义 perspective 属性时，其子元素会获得透视效果，而不是元素本身。 例：
/*目前浏览器都不支持 perspective 属性。
Chrome 和 Safari 支持替代的 -webkit-perspective 属性。
*/
div
{
perspective: 500;
-webkit-perspective: 500; /* Safari 和 Chrome */
}perspective-origin: 设置 3D 元素的基点位置。*当元素定义 perspective 属性时，其子元素会获得透视效果，而不是元素本身。 例：
/*目前浏览器都不支持 perspective-origin 属性。
Chrome 和 Safari 支持替代的 -webkit-perspecitve-origin 属性。
*/
div
{
perspective-origin: 10% 10%;
-webkit-perspective-origin: 10% 10%; /* Safari 和 Chrome */
}!important: 提高指定CSS样式的属性值的优先权。例：width: 100px !important;
@media: 媒介，可以针对不同的屏幕尺寸设置不同的样式。例：@media screen and (max-width: 768px){}
@media screen and (max-width: 500px) {
.gridmenu {
width:100%;
}
.gridmain {
width:100%;
}
.gridright {
width:100%;
}
}| 值 | 描述 |
|---|---|
| all | 用于所有设备 |
| 用于打印机和打印预览 | |
| screen | 用于电脑屏幕，平板电脑，智能手机等。 |
| speech | 应用于屏幕阅读器等发声设备 |
| 值 | 描述 |
|---|---|
| aspect-ratio | 定义输出设备中的页面可见区域宽度与高度的比率 |
| color | 定义输出设备每一组彩色原件的个数。如果不是彩色设备，则值等于0 |
| color-index | 定义在输出设备的彩色查询表中的条目数。如果没有使用彩色查询表，则值等于0 |
| device-aspect-ratio | 定义输出设备的屏幕可见宽度与高度的比率。 |
| device-height | 定义输出设备的屏幕可见高度。 |
| device-width | 定义输出设备的屏幕可见宽度。 |
| grid | 用来查询输出设备是否使用栅格或点阵。 |
| height | 定义输出设备中的页面可见区域高度。 |
| max-aspect-ratio | 定义输出设备的屏幕可见宽度与高度的最大比率。 |
| max-color | 定义输出设备每一组彩色原件的最大个数。 |
| max-color-index | 定义在输出设备的彩色查询表中的最大条目数。 |
| max-device-aspect-ratio | 定义输出设备的屏幕可见宽度与高度的最大比率。 |
| max-device-height | 定义输出设备的屏幕可见的最大高度。 |
| max-device-width | 定义输出设备的屏幕最大可见宽度。 |
| max-height | 定义输出设备中的页面最大可见区域高度。 |
| max-monochrome | 定义在一个单色框架缓冲区中每像素包含的最大单色原件个数。 |
| max-resolution | 定义设备的最大分辨率。 |
| max-width | 定义输出设备中的页面最大可见区域宽度。 |
| min-aspect-ratio | 定义输出设备中的页面可见区域宽度与高度的最小比率。 |
| min-color | 定义输出设备每一组彩色原件的最小个数。 |
| min-color-index | 定义在输出设备的彩色查询表中的最小条目数。 |
| min-device-aspect-ratio | 定义输出设备的屏幕可见宽度与高度的最小比率。 |
| min-device-width | 定义输出设备的屏幕最小可见宽度。 |
| min-device-height | 定义输出设备的屏幕的最小可见高度。 |
| min-height | 定义输出设备中的页面最小可见区域高度。 |
| min-monochrome | 定义在一个单色框架缓冲区中每像素包含的最小单色原件个数 |
| min-resolution | 定义设备的最小分辨率。 |
| min-width | 定义输出设备中的页面最小可见区域宽度。 |
| monochrome | 定义在一个单色框架缓冲区中每像素包含的单色原件个数。如果不是单色设备，则值等于0 |
| orientation | 定义输出设备中的页面可见区域高度是否大于或等于宽度。 |
| resolution | 定义设备的分辨率。如：96dpi, 300dpi, 118dpcm |
| scan | 定义电视类设备的扫描工序。 |
| width | 定义输出设备中的页面可见区域宽度。 |
vw/vh: 屏幕浏览器视口的宽高，将屏幕均分为100个平均尺寸。例：width: 100vw; height: 100vh;
filter: 滤镜。例：filter: blur(40px)
| 值 | 描述 | |
|---|---|---|
| none | 默认值，没有效果。 | |
| blur(px) | 给图像设置高斯模糊。"radius"一值设定高斯函数的标准差，或者是屏幕上以多少像素融在一起， 所以值越大越模糊； 如果没有设定值，则默认是0；这个参数可设置css长度值，但不接受百分比值。 | |
| brightness(%) | 给图片应用一种线性乘法，使其看起来更亮或更暗。如果值是0%，图像会全黑。值是100%，则图像无变化。其他的值对应线性乘数效果。值超过100%也是可以的，图像会比原来更亮。如果没有设定值，默认是1。 | |
| contrast(%) | 调整图像的对比度。值是0%的话，图像会全黑。值是100%，图像不变。值可以超过100%，意味着会运用更低的对比。若没有设置值，默认是1。 | |
| drop-shadow(h-shadow v-shadow blur spread color) | 给图像设置一个阴影效果。阴影是合成在图像下面，可以有模糊度的，可以以特定颜色画出的遮罩图的偏移版本。 函数接受<shadow>(在CSS3背景中定义)类型的值，除了"inset"关键字是不允许的。该函数与已有的box-shadow box-shadow属性很相似；不同之处在于，通过滤镜，一些浏览器为了更好的性能会提供硬件加速。
| |
| grayscale(%) | 将图像转换为灰度图像。值定义转换的比例。值为100%则完全转为灰度图像，值为0%图像无变化。值在0%到100%之间，则是效果的线性乘子。若未设置，值默认是0； | |
| hue-rotate(deg) | 给图像应用色相旋转。"angle"一值设定图像会被调整的色环角度值。值为0deg，则图像无变化。若值未设置，默认值是0deg。该值虽然没有最大值，超过360deg的值相当于又绕一圈。 | |
| invert(%) | 反转输入图像。值定义转换的比例。100%的价值是完全反转。值为0%则图像无变化。值在0%和100%之间，则是效果的线性乘子。 若值未设置，值默认是0。 | |
| opacity(%) | 转化图像的透明程度。值定义转换的比例。值为0%则是完全透明，值为100%则图像无变化。值在0%和100%之间，则是效果的线性乘子，也相当于图像样本乘以数量。 若值未设置，值默认是1。该函数与已有的opacity属性很相似，不同之处在于通过filter，一些浏览器为了提升性能会提供硬件加速。 | |
| saturate(%) | 转换图像饱和度。值定义转换的比例。值为0%则是完全不饱和，值为100%则图像无变化。其他值，则是效果的线性乘子。超过100%的值是允许的，则有更高的饱和度。 若值未设置，值默认是1。 | |
| sepia(%) | 将图像转换为深褐色。值定义转换的比例。值为100%则完全是深褐色的，值为0%图像无变化。值在0%到100%之间，则是效果的线性乘子。若未设置，值默认是0； | |
| url() | URL函数接受一个XML文件，该文件设置了 一个SVG滤镜，且可以包含一个锚点来指定一个具体的滤镜元素。 例如：
|
:link：伪类选择器用于选取未被访问的链接。
*:link 选择器不会设置已经访问过的链接的样式。
<style>
a:link{
color:red;
}
</style>
<body>
<a href="http://www.baidu.com">百度</a>
</body>:visited：伪类选择器用于选取已被访问的链接。
<style>
a:visited
{
background-color:yellow;
}
</style>
<body>
<a href="http://www.w3school.com.cn">W3Sschool</a>
<a href="http://www.google.com">Google</a>
<a href="http://www.wikipedia.org">Wikipedia</a>
<p><b>注释：</b>:visited 选择器为已被访问的链接设置样式。</p>
</body>:active：伪类选择器用于选择活动链接。点击的瞬间生效
<style type="text/css">
a:active{
color: #0000FF
}
</style>
<body>
<p><b><a href="/index.html" target="_blank">这是一个链接。</a></b></p>
<p><b>注释：</b>在 CSS 定义中，a:hover 必须位于 a:link 和 a:visited 之后，这样才能生效！</p>
<p><b>注释：</b>在 CSS 定义中，a:active 必须位于 a:hover 之后，这样才能生效！</p>
</body>:focus：伪类选择器用于选取获得焦点的元素。
<style>
input:focus
{
background-color:yellow;
}
</style>
<body>
<p>在文本框中点击，您会看到黄色的背景：</p>
<form>
First name: <input type="text" name="firstname" /><br>
Last name: <input type="text" name="lastname" />
</form>
<p><b>注释：</b>如果 :focus 用于 IE8 ，则必须声明 <!DOCTYPE>。</p>
</body>:after：伪类选择器在被选元素的内容之后插入新内容。
<style>
p:after
{
content:""; //每一个after必须添加此代码，否则无法生效
}
</style>:before：伪类选择器在被选元素的内容之前插入新内容。
<style>
p:before
{
content:""; //每一个before必须添加此代码，否则无法生效
}
</style>font属性：可以统一连写
font-size: 字体大小 例：font-size: 16px;
font-family: 字体类型 例：font-family: "微软雅黑", sans-serif;
font-style: 字体样式 例：font-style: normal;
| 值 | 描述 |
|---|---|
| normal | 默认，普通字体 |
| italic | 斜体 |
| oblique | 倾斜字体 |
font-weidth: 字体粗细 例：font-weidth: normal;
| 值 | 描述 |
|---|---|
| normal | 默认，正常粗细 |
| bold | 粗体 |
| bolder | 更粗的字体 |
| lighter | 更细的字体 |
| 100 200 300 400 500 600 700 800 900 | 定义由粗到细的字符。400 等同于 normal，而 700 等同于 bold。 |
transistion属性：可以统一连写
transition: all 1s; 在规定的时间从一个大小变换到其他大小，过度时间曲线的延迟时间。all：表示所有属性
transition-property: background; 针对某一个属性进行过度，可以添加多个属性。
transition-duration: 1s; 过渡时间。
transition-timing-function: ease; 过度时间曲线，默认
| 值 | 描述 |
|---|---|
| ease | 默认值，逐渐变慢。 |
| linear | 匀速 |
| ease-in | 加速 |
| ease-out | 减速 |
| ease-in-out | 先加速再减速 |
| cubic-bezier([参数]) | 贝塞尔曲线 |
transition-delay: 5s; 过度延迟时间。
text属性：文本样式
text-align: 文本对齐方式。例：text-align: center;
| 值 | 描述 |
|---|---|
| left | 默认，左对齐 |
| center | 居中对齐 |
| right | 右对齐 |
text-indent: 段落首行缩进。 例：text-indent: 2em; 中文首行缩进2字符常用
text-decoration: 文本装饰线。例：text-decoration: none;
| 值 | 描述 |
|---|---|
| none | 默认，不显示任何装饰线 |
| underline | 在文本下方显示装饰线 |
| overline | 在文本上方显示装饰线 |
| line-through | 在文本中间显示装饰线，相当于删除线 |
text-transform: 英文字母大小写转换。例：text-transform: none;
| 值 | 描述 |
|---|---|
| none | 默认，保持文本中英文单词的默认大小写 |
| capitalize | 单词首字母大写 |
| uppercase | 全大写 |
| lowercase | 全小写 |
text-shadow: 文本阴影。例：text-shadow: 0 0 10 red;
四个值分别为：
| 值 | 描述 |
|---|---|
| 水平方向阴影偏移（h-shadow） | “0”表示维持原位，正数为向右偏移，负数为向左偏移。单位为像素“px”。 |
| 垂直方向阴影偏移（v-shadow） | “0”表示维持原位，正数为向上偏移，负数为向下偏移。单位为像素“px”。 |
| 阴影模糊距离（blur） | 用正数表示阴影模糊的单位距离，距离越大模糊程度越高，单位为像素“px”。 |
| 阴影的颜色（color） | 支持Web技术中的常用颜色模式：“颜色英文单词”、“HEX”、“RGBa”、“HSLa”。 |
text-overflow: 当文本溢出时的设置。例：text-overflow: clip;
| 值 | 描述 |
|---|---|
| clip | 裁剪文本 |
| ellipsis | 多出来的文本用省略号代替， 需要文本设置不换行 |
显示三排再省略：
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;background属性：背景设置
background-color: 设置背景颜色。例：background-color: red;
background-image: 设置背景图片。例：background-image: url(图片地址);
background-repeat: 设置背景图片的格式。例：background-repeat: repeat;
| 值 | 描述 |
|---|---|
| repeat | 默认，以“平铺”的方式排列图片 |
| repeat-x | 只在水平方向（X轴方向）进行重复 |
| repeat-y | 只在垂直方向（Y轴方向）进行重复 |
| no-repeat | 不平铺 |
background-position: 背景图定位。例：background-position: left top;
| 值 | 描述 |
|---|---|
| 方位英文单词 | 有“left”、“right”、“top”、“bottom”和“center”。用法如：“left top”（默认），设置背景图在元素内的“左上方”；“right bottom”，设置背景图在元素内的“右下方”；“center center”，设置背景图在元素的“中心”。 |
| 百分比单位 | 用法如：“0% 50%”，设置背景图在元素内“水平方向”的“左方”，垂直方向的“中心”；“50% 50%”,，设置背景图在元素内的“中心”；“100% 100%”,，设置背景图在元素内的“右下方”。 |
| 像素单位 | 背景图的“左上角”相对于元素“左上角”偏移的距离，如“10px 20px”,设置背景图“水平向右”偏移10像素，“垂直向下”偏移20像素。 |
background-attachment: 固定背景图片。例：background-attachment: fixed
| 值 | 描述 |
|---|---|
| scroll | 默认值，当页面滚动的时候，背景图也跟随页面同步滚动 |
| fixed | 页面出现滚动条后就算页面滚动，背景图也会固定在原来的位置不会跟随页面滚动。 |
background-clip: 背景裁切范围。例：background-clip: border-box;
| 值 | 描述 |
|---|---|
| border-box | 默认，背景的覆盖范围从“border”开始 |
| padding-box | 背景的覆盖范围从“padding”开始 |
| content-box | 背景的覆盖范围从“content”开始 |
background-size: 背景图片的大小。例：background-size: 100% 100%;
| 值 | 描述 |
|---|---|
| 像素值 | 设置两个值，一个为宽、一个为高，单位为“PX”。 亦可以一个值为固定值一个为auto，达到原始图像比例的效果 |
| 百分比值 | 结构与像素值一样，单位为"%" |
| contain | 自动将背景图像填满元素的其中一边，图像的比例保持不变。 |
| cover | 在保持图像原始比例的情况下，将元素的背景区域完全覆盖，超出元素宽高的部分会自动被裁剪，是一种比较“智能”的背景图片大小设置方式，通过配合“background-position”属性使用可以将开发者认为背景图像中“更重要”的部分通过定位显示出来。 |
background-origin: 背景图像开始的位置。例：background-origin: content-box;
| 值 | 描述 |
|---|---|
| border-box | 默认，背景的覆盖范围从“border”开始 |
| padding-box | 背景的覆盖范围从“padding”开始 |
| content-box | 背景的覆盖范围从“content”开始 |
background: 背景渐变色。例：background: linear-gradient(red, black);
线性渐变：沿着一条直线进行，必须要具有两种或以上的颜色
/*最基本的渐变*/
background: linear-gradient(#d80000,#2c2cff);
/*一个有方向的渐变*/
background: -webkit-linear-gradient(left,#bce510,#e66055); //谷歌浏览器
background: -moz-linear-gradient(left,#bce510,#e66055); //搜狐浏览器
background: -ms-linear-gradient(left,#bce510,#e66055); //IE浏览器
background: linear-gradient(to right,#bce510,#e66055); //不进行适配
/*边角方向开始的渐变*/
background: -webkit-linear-gradient(left top,#d80000,#2c2cff);
background: -moz-linear-gradient(left top,#d80000,#2c2cff);
background: -ms-linear-gradient(left top,#d80000,#2c2cff);
background: linear-gradient(to bottom right,#d80000,#2c2cff);
/*有角度的渐变*/
background: -webkit-linear-gradient(15deg,#d8b700,#0bcc6c);
background: -moz-linear-gradient(15deg,#d8b700,#0bcc6c);
background: -ms-linear-gradient(15deg,#d8b700,#0bcc6c);
background: linear-gradient(15deg,#d8b700,#0bcc6c);
/*多色渐变*/
background: -webkit-linear-gradient(#d8b700,#0bcc6c,#0b89cc,#eba45c);
background: -moz-linear-gradient(#d8b700,#0bcc6c,#0b89cc,#eba45c);
background: -ms-linear-gradient(#d8b700,#0bcc6c,#0b89cc,#eba45c);
background: linear-gradient(#d8b700,#0bcc6c,#0b89cc,#eba45c);
/*多重多色的渐变*/
background: -webkit-linear-gradient(0deg,rgba(126, 3, 191, 0.1),rgba(126, 3, 191, 0.8)),
-webkit-linear-gradient(90deg,black,hsla(0, 100%, 50%, 0.3));
background: -moz-linear-gradient(0deg,rgba(126, 3, 191, 0.1),rgba(126, 3, 191, 0.8)),
-moz-linear-gradient(90deg,black,hsla(0, 100%, 50%, 0.3));
background: -ms-linear-gradient(0deg,rgba(126, 3, 191, 0.3),rgb(126, 3, 191)),
-ms-linear-gradient(90deg,black,hsla(0, 100%, 50%, 0.3));
background: linear-gradient(0deg,rgba(126, 3, 191, 0.3),rgb(126, 3, 191)),
-linear-gradient(90deg,black,hsla(0, 100%, 50%, 0.3));
/*重复线性渐变*/
background: -webkit-repeating-linear-gradient(#452ff2 5%, #ff00ce 10%, #a700ff 25%);
background: -moz-repeating-linear-gradient(#452ff2 5%, #ff00ce 10%, #a700ff 25%);
background: -ms-repeating-linear-gradient(#452ff2 5%, #ff00ce 10%, #a700ff 25%);
background: repeating-linear-gradient(#452ff2 5%, #ff00ce 10%, #a700ff 25%);径向渐变：颜色的变化过度方式是以一个圆的圆心为参照进行的
background: -webkit-radial-gradient(#d8b700,#0bcc6c,#0b89cc,#eba45c);
background: -moz-radial-gradient(#d8b700,#0bcc6c,#0b89cc,#eba45c);
background: -ms-radial-gradient(#d8b700,#0bcc6c,#0b89cc,#eba45c);
background: radial-gradient(#d8b700,#0bcc6c,#0b89cc,#eba45c);transform属性：变形转换，综合运用：translate、rotate、scale、skew
transform: translate(100px， 100px); XY平移
transform: translateX(100px); 横向平移
transform: translateY(100px); 纵向平移
transform: rotate(100deg); 按照顺时针旋转;
transform: rotateX(100deg); 按照上下旋转
transform: rotateY(100deg); 按照左右旋转
transform: scale(1.5); 放大或缩小倍数
transform: scaleX(1.2); 左右放大或缩小
transform: scaleY(1.2); 上下放大或缩小
transform: skew(15deg); 倾斜
transform: skewX(15deg); X轴倾斜
transform: skewY(15deg); Y轴倾斜
transform-origin: top left; 定义一个原点
transform-style: flat; 2d平面动画
transform-style: preserve-3d; 3d动画
animation属性： 动画
animation-name: 定义动画的名称，使用该属性调用关键帧执行动画。例：animation-name: resizeWord;
@keyframes: 动画关键帧定义，使用animation调用。例：
/*英文单词模式*/
@keyframes resizeWord{
from{ width: 100px }
to{ width: 800px; }
}
/*百分数模式*/
@keyframes resizeWord{
0%{ width: 100px }
20%{ width: 200px; }
40%{ width: 400px; }
60%{ width: 600px; }
80%{ width: 800px; }
100%{ width: 1000px; }
}animation-duration: 动画执行时间。例：animation-duration: 2s;
animation-timing-function: 动画事件曲线。例：animation-timing-function: ease;
| 值 | 描述 |
|---|---|
| ease | 默认值，逐渐变慢。 |
| linear | 匀速 |
| ease-in | 加速 |
| ease-out | 减速 |
| ease-in-out | 先加速再减速 |
| cubic-bezier([参数]) | 贝塞尔曲线 |
animation-delay: 动画延迟时间。例：animation-delay: 2s;
animation-iteration-count: 动画播放的次数。例：animation-iteration-count: 1;
| 值 | 描述 |
|---|---|
| 1 | 表示在执行某事件后只执行1次动画。 |
| [number] | 任意正整数，表示在执行某事件后只执行[numver]次动画。 |
| infinite | 表示在执行某事件后“无限次”执行动画。 |
animation-direction: 动画逆时针播放。例：animation-direction: alternate;
| 值 | 描述 | |
|---|---|---|
| normal | 默认值。动画应该正常播放。 | |
| alternate | 动画应该轮流反向播放。 | |
animation-play-state: 动画的播放与暂停。animation-play-state: running;
| 值 | 描述 | |
|---|---|---|
| running | 播放动画 | |
| paused | 暂停动画 | |
animation-fill-mode: 设定元素动画形态，它可以预设值动画播放前的“第一帧”和保留动画播放完成后的“最后一帧”。例：animation-fill-mode: backwards
| 值 | 描述 | |
|---|---|---|
| backwards | 让元素保持动画第一帧定义里所设置的CSS属性，直到动画开始执行。 | |
| forwards | 让元素保持动画播放结束后最后一帧定义里所设置的CSS属性。 | |
| both | 让元素保持动画第一帧里定义的CSS属性，直到动画开始，动画播放完成后又保持动画最后一帧的属性。 | |
animation:组合写法：动画名称、执行时间、速度曲线、延迟时间、播放次数、周期逆向播放、播放状态（开始/暂停）、首帧预设/末帧保留
弹性盒子布局：需要将属性值添加到需要布局的父元素上面才能实现
display: flex; 弹性盒子开始代码，一切开端
行列布局：
flex-direction: row; 默认行，从左往右排列
flex-direction: row-reverse; 从右往左排列，内容也一起调换排列
flex-direction: column; 列，从上往下排列
flex-direction: column-reverse; 从下往上排列，内容也一起调换排列
水平对齐：
justify-content: flex-start; 默认，水平左对齐
justify-content: flex-end; 水平右对齐
justify-content: center; 水平居中对齐
justify-content: space-between; 水平两端分散对齐
justify-content: space-around; 水平分散对齐
垂直对齐：
align-items: flex-start; 默认，垂直顶端对齐
align-items: flex-end; 垂直底端对齐
align-items: center; 垂直居中对齐
align-items: baseline; 基线对齐
align-items: stretch; 子标签高度为auto或者没有设置时，高度自动与父元素高度同步
换行：需要多行对齐时必添加此项
flex-wrap: none;
| 值 | 描述 | |
|---|---|---|
| none | 不换行 | |
| wrap | 换行 | |
| wrap-reverse | 换行颠倒 | |
多行对齐：
align-content: flex-start; 多行顶端对齐
align-content: flex-end; 多行底端对齐
align-content: center; 多行居中对齐
align-content: space-between; 多行两端分散对齐
align-content: space-around; 多行两端对齐
散装属性值：定义到子元素中
flex-grow: 使子元素瓜分父元素剩下的空间。例：flex-grow: 1;
flex-basis: 向父元素预约设置好的空间，并且此元素的权限大于width。如果两者有一个为auto，那么非auto的优先级更高。而且此元素受到max-width与min-width的限制。例：flex-basis: 100px;
flex-shrink: 当子元素的总宽度大于了父元素的宽度时，用此方法按比例缩减子元素的宽度。例：flex-shrink: 1;
5134
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
