边框

border-radius ---边框倒角

box-shadow ----边框阴影

border-image ---图片创建边框

border-image:url(border.png) 30 30 round;

背景

background-image ----背景图片

background-size ----指定图片大小

• 1、length设置背景图片高度和宽度。第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为 auto(自动)
• 2、percentage将计算相对于背景定位区域的百分比。第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为"auto(自动)"
• 3、cover此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。
• 4、contain此时会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小。

background-origin ----指定背景图像的位置区域

        padding-box背景图像填充框的相对位置
        border-box背景图像边界框的相对位置
        content-box背景图像的相对位置的内容框
    （ 指定两个背景图
             background-image: url(img_flwr.gif), url(paper.gif);
            background-position: right bottom, left top;
            background-repeat: no-repeat, repeat;
            padding: 15px;
        ）

background-clip ----背景剪裁属性是从指定位置开始绘制

    padding-box背景图像填充框的相对位置
    border-box背景图像边界框的相对位置
    content-box背景图像的相对位置的内容框

渐变

线性渐变Linear Gradients- 向下/向上/向左/向右/对角方向

background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

径向渐变Radial Gradients- 由它们的中心定义

  background-image: radial-gradient(shape size at position, start-color, ..., last-color);

设置形状大小

值 circle 或 ellipse。其中，circle 表示圆形，ellipse 表示椭圆形。默认值是 ellipse。
size 参数定义了渐变的大小。它可以是以下四个值：
1、closest-side
2、farthest-side
3、closest-corner
4、farthest-corner
列： background-image: radial-gradient(closest-side at 60% 55%, red, yellow, black);}
*一个重复的径向渐变*
  background-image: repeating-radial-gradient(red, yellow 10%, green 15%);

文本效果

box-shadow---盒子阴影

hanging-punctuation--规定标点字符是否位于线框之外。

none    不在文本整行的开头还是结尾的行框之外放置标签符号。
first   标点附着在首行开始边缘之外。
last    标点附着在首行结尾边缘之外。

punctuation-trim---在每一行的开头放置开头标点符号

none    请勿修剪打开或关闭标点符号
start   在每一行的开头放置开头标点符号
end 在每一行的末尾修剪结束标点符号
allow-end   如果另有不适合之前的理由，修剪每行末尾的结束标点符号。
adjacent    若以前相邻字符修剪开口punctuation是一个全形开口，中间或结束标点符号，或表意文字空间。修剪结束标点符号，如果下一个相邻的字符是一个全形关闭或中间punctuation，或表意文字空间

text-align-last ---设置如何对齐最后一行或紧挨着强制换行符之前的行。

  auto  默认值。最后一行被调整，并向左对齐。
  left  最后一行向左对齐。
  right 最后一行向右对齐。
  center    最后一行居中对齐
  justify   最后一行被调整为两端对齐。
  start 最后一行在行开头对齐（如果 text-direction 是从左到右，则向左对齐；如果 text-direction 是从右到左，则向右对齐）
  end   最后一行在行末尾对齐（如果 text-direction 是从左到右，则向右对齐；如果 text-direction 是从右到左，则向左对齐）。
  initial   设置该属性为它的默认值
  inherit   从父元素继承该属性

text-emphasis---改变单词之间的间距使得每行对齐

列：text-emphasis: text-emphasis-style text-emphasis-color;
text-emphasis-style 向元素的文本应用重点标记。
text-emphasis-color 定义重点标记的前景色。

text-justify--改变字与字之间的间距使得每行对齐

  列： {text-align:justify; text-justify:inter-word;}
auto    浏览器决定齐行算法。
none    禁用齐行。
inter-word  增加/减少单词间的间隔。
inter-ideograph 用表意文本来排齐内容。
inter-cluster   只对不包含内部单词间隔的内容（比如亚洲语系）进行排齐。
distribute  类似报纸版面，除了在东亚语系中最后一行是不齐行的。
kashida 通过拉伸字符来排齐内容。

text-outline--文本轮廓

列：text-outline: thickness blur color;
thickness   必需。轮廓的粗细。
blur    可选。轮廓的模糊半径。
color   必需。轮廓的颜色。

text-overflow---显示溢出内容

clip    修剪文本。
ellipsis    显示省略符号来代表被修剪的文本。
string  使用给定的字符串来代表被修剪的文本。

text-show

列：text-shadow: h-shadow v-shadow blur color;
h-shadow    必需。水平阴影的位置。允许负值。
v-shadow    必需。垂直阴影的位置。允许负值。
blur    可选。模糊的距离。
color   可选。阴影的颜色

text-wrap---规定文本的换行规则

normal  只在允许的换行点进行换行。
none    不换行。元素无法容纳的文本会溢出。
unrestricted    在任意两个字符间换行。
suppress    压缩元素中的换行。浏览器只在行中没有其他有效换行点    时进行换行。

word-wrap---允许对长的不可分割的单词进行分割并换行到下一行。

  normal    只在允许的断字点换行（浏览器保持默认处理）。
  break-word    在长单词或 URL 地址内部进行换行。

word-break--- 规定非中日韩文本的换行规则

  normal    使用浏览器默认的换行规则。
  break-all 允许在单词内换行。
  keep-all  只能在半角空格或连字符处换行。

font-family--设置字体

   font-family: myFirstFont;
   src: url(sansation_bold.woff);
   font-weight:bold;

2D 转换

translate()--根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。

  transform: translate(50px,100px);
  -ms-transform: translate(50px,100px); /* IE 9 */
  -webkit-transform: translate(50px,100px); /* Safari and Chrome */

rotate()--在一个给定度数顺时针旋转的元素。负值是允许的，这样是元素逆时针旋转。

transform: rotate(30deg);

scale()---该元素增加或减少的大小，取决于宽度（X轴）和高度（Y轴）的参数：

 transform: scale(2,3);

skew()---两个参数值，分别表示X轴和Y轴倾斜的角度

  skewX(<angle>);表示只在X轴(水平方向)倾斜。
  skewY(<angle>);表示只在Y轴(垂直方向)倾斜。

matrix()方法有六个参数，包含旋转，缩放，移动（平移）和倾斜功能。

  transform:matrix(0.866,0.5,-0.5,0.866,0,0);
总结：
matrix(n,n,n,n,n,n) 定义 2D 转换，使用六个值的矩阵。
translate(x,y)  定义 2D 转换，沿着 X 和 Y 轴移动元素。
translateX(n)   定义 2D 转换，沿着 X 轴移动元素。
translateY(n)   定义 2D 转换，沿着 Y 轴移动元素。
scale(x,y)  定义 2D 缩放转换，改变元素的宽度和高度。
scaleX(n)   定义 2D 缩放转换，改变元素的宽度。
scaleY(n)   定义 2D 缩放转换，改变元素的高度。
rotate(angle)   定义 2D 旋转，在参数中规定角度。
skew(x-angle,y-angle)   定义 2D 倾斜转换，沿着 X 和 Y 轴。
skewX(angle)    定义 2D 倾斜转换，沿着 X 轴。
skewY(angle)    定义 2D 倾斜转换，沿着 Y 轴。

3D 转换

rotateX()---围绕其在一个给定度数X轴旋转的元素

transform: rotateX(120deg);

rotateY()---围绕其在一个给定度数Y轴旋转的元素。

 transform: rotateY(130deg);
  总结：
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)   定义 3D 转换，使用 16 个值的 4x4 矩阵。
translate3d(x,y,z)  定义 3D 转化。
translateX(x)   定义 3D 转化，仅使用用于 X 轴的值。
translateY(y)   定义 3D 转化，仅使用用于 Y 轴的值。
translateZ(z)   定义 3D 转化，仅使用用于 Z 轴的值。
scale3d(x,y,z)  定义 3D 缩放转换。
scaleX(x)   定义 3D 缩放转换，通过给定一个 X 轴的值。
scaleY(y)   定义 3D 缩放转换，通过给定一个 Y 轴的值。
scaleZ(z)   定义 3D 缩放转换，通过给定一个 Z 轴的值。
rotate3d(x,y,z,angle)   定义 3D 旋转。
rotateX(angle)  定义沿 X 轴的 3D 旋转。
rotateY(angle)  定义沿 Y 轴的 3D 旋转。
rotateZ(angle)  定义沿 Z 轴的 3D 旋转。
perspective(n)  定义 3D 转换元素的透视视图。

image.png

transition--过渡

transition: width 2s, height 2s, transform 2s;

列：transition-property: width;
transition-duration: 1s;
transition-timing-function: linear;
transition-delay: 2s;
/* Safari */
-webkit-transition-property:width;
-webkit-transition-duration:1s;
-webkit-transition-timing-function:linear;
-webkit-transition-delay:2s

transition-timing-function 属性

linear  规定以相同速度开始至结束的过渡效果（等于 cubic-    bezier(0,0,1,1)）。
ease    规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-    bezier(0.25,0.1,0.25,1)）。
ease-in 规定以慢速开始的过渡效果（等于 cubic-    bezier(0.42,0,1,1)）。
ease-out    规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。
ease-in-out 规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。
cubic-bezier(n,n,n,n)   在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。

动画----@keyframes 规则

@keyframes 规则是创建动画。

@keyframes 规则内指定一个 CSS 样式和动画将逐步从目前的样式更改为新的样式。

用法
div{animation:myfirst 5s;
-moz-animation:myfirst 5s; /* Firefox */
-webkit-animation:myfirst 5s; /* Safari and Chrome */
-o-animation:myfirst 5s; /* Opera */
}
@keyframes myfirst{
    0%   {background: red;}
    25%  {background: yellow;}
    50%  {background: blue;}
    100% {background: green;}
}

多列

column-count--指定了需要分割的列数

column-gap-- 指定了列与列间的间隙

column-rule-style--指定了列与列间的边框样式

column-rule-width--指定了两列的边框厚度

column-rule-color--指定了两列的边框颜色

column-rule --是 column-rule-* 所有属性的简写

column-span --指定标签元素跨越所有列

column-width--属性指定了列的宽度

columns--指定列的宽度和数量

用户界面

resize--指定一个元素是否应该由用户去调整大小

div{
resize:both;
overflow:auto;
}

box-sizing--允许您以确切的方式定义适应某个区域的具体内容

outline-offset--对轮廓进行偏移，并在超出边框边缘的位置绘制轮廓

规定边框边缘之外 15 像素处的轮廓：
div{
border:2px solid black;
outline:2px solid red;
outline-offset:15px;
}

分页

列：
<style>
 ul.pagination {
    display: inline-block;
    padding: 0;
    margin: 0;
}
ul.pagination li {display: inline;}
ul.pagination li a {
    color: black;
    float: left;
    padding: 8px 16px;
    text-decoration: none;
}
ul.pagination li a.active {
  background-color: #4CAF50;
  color: white;
}
ul.pagination li a:hover:not(.active) {background-color: #ddd;}
</style>
<body>
<h2>点击及鼠标悬停分页样式</h2>
<p>移动鼠标的分页的数字上。</p>
<ul class="pagination">
<li><a href="#">«</a></li>
<li><a href="#">1</a></li>
<li><a class="active" href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">6</a></li>
<li><a href="#">7</a></li>
<li><a href="#">»</a></li>
</ul>
</body>

框大小

box-sizing--可以设置 width 和 height 属性中包含了 padding(内边距) 和 border(边框)。

默认情况下，元素的宽度与高度计算方式如下：
width(宽) + padding(内边距) + border(边框) = 元素实际宽度
height(高) + padding(内边距) + border(边框) = 元素实际高度
列：box-sizing: border-box;

弹性盒子

flex-direction--指定了弹性子元素在父容器中的位置

flex-direction的值有：
    row：横向从左到右排列（左对齐），默认的排列方式。
    row-reverse：反转横向排列（右对齐，从后往前排，最后一项排在最前面。
    column：纵向排列。
  column-reverse：反转纵向排列，从后往前排，最后一项排在最上面。

justify-content --把弹性项沿着弹性容器的主轴线（main axis）对齐

flex-start：
弹性项目向行头紧挨着填充。这个是默认值。第一个弹性项的main-start外边距边线被放置在该行的main-start边线，而后续弹性项依次平齐摆放。

flex-end：
弹性项目向行尾紧挨着填充。第一个弹性项的main-end外边距边线被放置在该行的main-end边线，而后续弹性项依次平齐摆放。

center：
弹性项目居中紧挨着填充。（如果剩余的自由空间是负的，则弹性项目将在两个方向上同时溢出）。

space-between：
弹性项目平均分布在该行上。如果剩余空间为负或者只有一个弹性项，则该值等同于flex-start。否则，第1个弹性项的外边距和行的main-start边线对齐，而最后1个弹性项的外边距和行的main-end边线对齐，然后剩余的弹性项分布在该行上，相邻项目的间隔相等。

space-around：
弹性项目平均分布在该行上，两边留有一半的间隔空间。如果剩余空间为负或者只有一个弹性项，则该值等同于center。否则，弹性项目沿该行分布，且彼此间隔相等（比如是20px），同时首尾两边和弹性容器之间留有一半的间隔（1/2*20px=10px）。

align-items- 设置或检索弹性盒子元素在侧轴（纵轴）方向上的对齐方式

  flex-start：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。
  flex-end：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。
  center：弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。
  baseline：如弹性盒子元素的行内轴与侧轴为同一条，则该值与'flex-start'等效。其它情况下，该值将参与基线对齐。
  stretch：如果指定侧轴大小的属性值为'auto'，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照'min/max-width/height'属性的限制。

flex-wrap--用于指定弹性盒子的子元素换行方式

nowrap - 默认， 弹性容器为单行。该情况下弹性子项可能会溢出容器。
wrap - 弹性容器为多行。该情况下弹性子项溢出的部分会被放置到新行，子项内部会发生断行
wrap-reverse -反转 wrap 排列

align-content--用于修改 flex-wrap 属性的行为。类似于 align-items, 但它不是设置弹性子元素的对齐，而是设置各个行的对齐。

stretch - 默认。各行将会伸展以占用剩余的空间。
flex-start - 各行向弹性盒容器的起始位置堆叠。
flex-end - 各行向弹性盒容器的结束位置堆叠。
center -各行向弹性盒容器的中间位置堆叠。
space-between -各行在弹性盒容器中平均分布。
space-around - 各行在弹性盒容器中平均分布，两端保留子元素与子元素之间间距大小的一半。