css总结

1. CSS 边框
   通过 CSS，能够创建圆角边框，向矩形添加阴影，使用图片来绘制边框 - 并且不需使用设计软件。

border-radius
box-shadow
border-image

2. CSS 圆角边框
   CSS 中，使用border-radius 属性用于创建圆角

3. CSS3 边框阴影
   在 CSS3 中，box-shadow 用于向方框添加阴影：

4. 新的边框属性
   属性 描述 CSS

border-image 设置所有 border-image-* 属性的简写属性。 3
border-radius 设置所有四个 border-*-radius 属性的简写属性。 3
box-shadow 向方框添加一个或多个阴影。 3

5. CSS3 背景
   CSS3 包含多个新的背景属性，它们提供了对背景更强大的控制。

background-size
background-origin

6. CSS background-size 属性
   background-size 属性规定背景图片的尺寸。

7. CSS 包含多个新的文本特性。

text-shadow
word-wrap

Internet Explorer 10、Firefox、Chrome、Safari 以及 Opera 支持 text-shadow 属性,所有主流浏览器都支持 word-wrap 属性。

Internet Explorer 9 以及更早的版本，不支持 text-shadow 属性

text-shadow 可向文本应用阴影:
能够规定水平阴影、垂直阴影、模糊距离，以及阴影的颜色。

**word-wrap **属性允许您允许文本强制文本进行换行 - 即使这意味着会对单词进行拆分

7. 新的文本属性

hanging-punctuation 规定标点字符是否位于线框之外。
punctuation-trim 规定是否对标点字符进行修剪。
text-align-last 设置如何对齐最后一行或紧挨着强制换行符之前的行。
text-emphasis 向元素的文本应用重点标记以及重点标记的前景色。
text-justify 规定当 text-align 设置为 “justify” 时所使用的对齐方法。
text-outline 规定文本的轮廓。
text-overflow 规定当文本溢出包含元素时发生的事情。
text-shadow 向文本添加阴影。
text-wrap 规定文本的换行规则。
word-break 规定非中日韩文本的换行规则。
word-wrap 允许对长的不可分割的单词进行分割并换行到下一行。

8. font-face
   CSS3 字体描述符
   下面的表格列出了能够在 font-face 规则中定义的所有字体描述符：

font-family name 必需。规定字体的名称。
src URL 必需。定义字体文件的 URL。
font-stretch normal
condensed
ultra-condensed
extra-condensed
semi-condensed
expanded
semi-expanded
extra-expanded
ultra-expanded 可选。定义如何拉伸字体。默认是 “normal”。
font-style ormal
italic
oblique 可选。定义字体的样式。默认是 “normal”。
font-weight normal
bold
100
200
300
400
500
600
700
800
900 可选。定义字体的粗细。默认是 “normal”。
unicode-range unicode-range 可选。定义字体支持的 UNICODE 字符范围。默认是 “U+0-10FFFF”。

9. 动画效果
   translate() 方法
   通过 translate() 方法，元素从其当前位置移动，根据给定的 left（x 坐标） 和 top（y 坐标） 位置参数：

div
{
	transform: translate(50px,100px);
	-ms-transform: translate(50px,100px);		/* IE 9 */
	-webkit-transform: translate(50px,100px);	/* Safari and Chrome */
	-o-transform: translate(50px,100px);		/* Opera */
	-moz-transform: translate(50px,100px);		/* Firefox */
}

值 translate(50px,100px) 把元素从左侧移动 50 像素，从顶端移动 100 像素。

rotate() 方法
通过 rotate() 方法，元素顺时针旋转给定的角度。允许负值，元素将逆时针旋转。

div{
	transform: rotate(30deg);
	-ms-transform: rotate(30deg);		/* IE 9 */
	-webkit-transform: rotate(30deg);	/* Safari and Chrome */
	-o-transform: rotate(30deg);		/* Opera */
	-moz-transform: rotate(30deg);		/* Firefox */
}

值 rotate(30deg) 把元素顺时针旋转 30 度。

scale() 方法
通过 scale() 方法，元素的尺寸会增加或减少，根据给定的宽度（X 轴）和高度（Y 轴）参数：

div{
	transform: scale(2,4);
	-ms-transform: scale(2,4);	/* IE 9 */
	-webkit-transform: scale(2,4);	/* Safari 和 Chrome */
	-o-transform: scale(2,4);	/* Opera */
	-moz-transform: scale(2,4);	/* Firefox */
}

值 scale(2,4) 把宽度转换为原始尺寸的 2 倍，把高度转换为原始高度的 4 倍。

rotateX() 方法
通过 rotateX() 方法，元素围绕其 X 轴以给定的度数进行旋转。

div{
	transform: rotateX(120deg);
	-webkit-transform: rotateX(120deg);	/* Safari 和 Chrome */
	-moz-transform: rotateX(120deg);	/* Firefox */
}

rotateY() 旋转
通过 rotateY() 方法，元素围绕其 Y 轴以给定的度数进行旋转。

div{
	transform: rotateY(130deg);
	-webkit-transform: rotateY(130deg);	/* Safari 和 Chrome */
	-moz-transform: rotateY(130deg);	/* Firefox */
}

10. 过渡
    通过 CSS3，我们可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。
    请把鼠标移动到下面的元素上：

Internet Explorer 10、Firefox、Chrome 以及 Opera 支持 transition 属性。
Safari 需要前缀 -webkit-
Internet Explorer 9 以及更早的版本，不支持 transition 属性
Chrome 25 以及更早的版本，需要前缀 -webkit-

例：应用于宽度属性的过渡效果，时长为 2 秒：

div{
	transition: width 2s;
	-moz-transition: width 2s;	/* Firefox 4 */
	-webkit-transition: width 2s;	/* Safari 和 Chrome */
	-o-transition: width 2s;	/* Opera */
}

div{
	transition: width 2s, height 2s, transform 2s;
	-moz-transition: width 2s, height 2s, -moz-transform 2s;
	-webkit-transition: width 2s, height 2s, -webkit-transform 2s;
	-o-transition: width 2s, height 2s,-o-transform 2s;
}

11. keyframes
    例： “myfirst” 动画捆绑到 div 元素，时长：5 秒：

div{
	animation: myfirst 5s;
	-moz-animation: myfirst 5s;	/* Firefox */
	-webkit-animation: myfirst 5s;	/* Safari 和 Chrome */
	-o-animation: myfirst 5s;	/* Opera */
}

12. 样式：
    resize
    box-sizing
    outline-offset

例：规定 div 元素可由用户调整大小：

Resize

div{
	resize:both;
	overflow:auto;
}

Box Sizing
box-sizing 属性允许您以确切的方式定义适应某个区域的具体内容。
例：规定两个并排的带边框方框：

div{
	box-sizing:border-box;
	-moz-box-sizing:border-box;	/* Firefox */
	-webkit-box-sizing:border-box;	/* Safari */
	width:50%;
	float:left;
}

13. 选择器

.class .intro 选择 class=“intro” 的所有元素。 1
#id #firstname 选择 id=“firstname” 的所有元素。 1
element p 选择所有

元素。 1
element,element div,p 选择所有

元素和所有

元素。 1
element element div p 选择

元素内部的所有

元素。 1
element>element div>p 选择父元素为

元素的所有

元素。 2
element+element div+p 选择紧接在

元素之后的所有

元素。 2
[attribute] [target] 选择带有 target 属性所有元素。 2
[attribute=value] [target=_blank] 选择 target="_blank" 的所有元素。 2
[attribute~=value] [title~=flower] 选择 title 属性包含单词 “flower” 的所有元素。 2
[attribute|=value] [lang|=en] 选择 lang 属性值以 “en” 开头的所有元素。 2
:link a:link 选择所有未被访问的链接。 1
:visited a:visited 选择所有已被访问的链接。 1
:active a:active 选择活动链接。 1
:hover a:hover 选择鼠标指针位于其上的链接。 1
:focus input:focus 选择获得焦点的 input 元素。 2
:first-letter p:first-letter 选择每个

元素的首字母。 1
:first-line p:first-line 选择每个

元素的首行。 1
:first-child p:first-child 选择属于父元素的第一个子元素的每个

元素。 2
:before p:before 在每个

元素的内容之前插入内容。 2
:after p:after 在每个

元素的内容之后插入内容。 2
:lang(language) p:lang(it) 选择带有以 “it” 开头的 lang 属性值的每个

元素。 2
element1~element2 p~ul 选择前面有

元素的每个

元素。 3
[attribute^=value] a[src^=“https”] 选择其 src 属性值以 “https” 开头的每个 元素。 3
[attribute$=value] a[src$=".pdf"] 选择其 src 属性以 “.pdf” 结尾的所有 元素。 3
[attribute*=value] a[src*=“abc”] 选择其 src 属性中包含 “abc” 子串的每个 元素。 3
:first-of-type p:first-of-type 选择属于其父元素的首个

元素的每个

元素。 3
:last-of-type p:last-of-type 选择属于其父元素的最后

元素的每个

元素。 3
:only-of-type p:only-of-type 选择属于其父元素唯一的

元素的每个

元素。 3
:only-child p:only-child 选择属于其父元素的唯一子元素的每个

元素。 3
:nth-child(n) p:nth-child(2) 选择属于其父元素的第二个子元素的每个

元素。 3
:nth-last-child(n) p:nth-last-child(2) 同上，从最后一个子元素开始计数。 3
:nth-of-type(n) p:nth-of-type(2) 选择属于其父元素第二个

元素的每个

元素。 3
:nth-last-of-type(n) p:nth-last-of-type(2) 同上，但是从最后一个子元素开始计数。 3
:last-child p:last-child 选择属于其父元素最后一个子元素每个

元素。 3
:root :root 选择文档的根元素。 3
:empty p:empty 选择没有子元素的每个

元素（包括文本节点）。 3
:target #news:target 选择当前活动的 #news 元素。 3
:enabled input:enabled 选择每个启用的 元素。 3
:disabled input:disabled 选择每个禁用的 元素 3
:checked input:checked 选择每个被选中的 元素。 3
:not(selector) :not§ 选择非

元素的每个元素。 3
::selection ::selection 选择被用户选取的元素部分。 3

来源：CSDN

作者：Aubrey_zheng

链接：https://blog.csdn.net/Aubrey_zheng/article/details/103467562