css3相关练习文章开头第一句加入：本文已参与「新人创作礼」活动，一起开启掘金创作之路。看开源前端框架项目发现很多cs

本文已参与「新人创作礼」活动，一起开启掘金创作之路。看开源前端框架项目发现很多css3知识，而之前又没有认真系统学习，很多都不知道所以然。所以花了两天时间在菜鸟网络网站上跟着学习了一下。并做了一些，自己欠缺的而又比较常用的笔记。

以后时不时回头看看，加深印象，或者用于项目当中去。

一阴影设置

text-shadow
box-shadow

几个常用属性

10px 表示在x轴上向右移动10px

5px表示在y轴上向下移动5px

2px表示模仿半径是2px

3px表示扩散半径是3px

red 表示阴影颜色

 box-shadow: 10px 5px 2px, 3px red;

二背景

background-image 背景图片设置

背景图片可以设置多个。层叠展示，哪个图片在前，就是显示在前。即靠近用户的感觉。

background-image: url("../../media/examples/star.png"),
                  url("../../media/examples/lizard.png");

background-size 背景大小

	background-size:80px 60px;
	background-size:50% 100%;

background-origin 相对位置

背景位置，属性区域，有三个属性

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

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

background-clip 裁剪

属性指定背景绘制区域。也有三个属性

值	说明
border-box	默认值。背景绘制在边框方框内（剪切成边框方框）。
padding-box	背景绘制在衬距方框内（剪切成衬距方框）。
content-box	背景绘制在内容方框内（剪切成内容方框）。

background-repeat 设置背景图片是否重复有多种设值

参考链接:developer.mozilla.org/en-US/docs/…

background-position 设置背景图片位置

参考链接：developer.mozilla.org/en-US/docs/…

background-color 背景颜色

参考链接：developer.mozilla.org/en-US/docs/…

三渐变

语法

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

从上倒下

background-image: linear-gradient(#e66465, #9198e5);

从左边到右边

background-image: linear-gradient(to right, red , yellow);v

从左上角到右下角

background-image: linear-gradient(to bottom right, red, yellow);

使用角度

background-image: linear-gradient(-90deg, red, yellow);

使用透明度的

background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));

重复性渐变

 background-image: repeating-linear-gradient(red, yellow 10%, green 20%);

径向渐变

语法

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

不均匀

background-image: radial-gradient(red 5%, yellow 15%, green 60%);

设置形状

background-image: radial-gradient(circle, red, yellow, green);

不同尺寸渐变

background-image: radial-gradient(closest-side at 60% 55%, red, yellow, black);
background-image: radial-gradient(farthest-side at 60% 55%, red, yellow, black);

重复径向渐变

background-image: repeating-radial-gradient(red, yellow 10%, green 15%);

四文本效果

Text Overflow属性

文本溢出内容显示
换行word-wrap
```
word-wrap:break-word;
```

单词拆分换行word-break

word-break: keep-all;

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

五字体

主要使用@font-face设置

font-family：名字

src：必需。定义字体文件的 URL。

<style> 
@font-face
{
	font-family: myFirstFont;
	src: url('Sansation_Light.ttf')
		,url('Sansation_Light.eot'); /* IE9 */
}

@font-face
{
    font-family: myFirstFont;
    src: url(sansation_bold.woff);
    font-weight:bold;
}
div
{
	font-family:myFirstFont;
}

六 2D转换 transform和transform-origin

translate()

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

translate值（50px，100px）是从左边元素移动50个像素，并从顶部移动100像素。

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

rotate()

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

rotate值（30deg）元素顺时针旋转30度。

transform: rotate(30deg);
-ms-transform: rotate(30deg); /* IE 9 */
-webkit-transform: rotate(30deg); /* Safari and Chrome */

scale()

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

scale（2,3）转变宽度为原来的大小的2倍，和其原始大小3倍的高度。

-ms-transform:scale(2,3); /* IE 9 */
-webkit-transform: scale(2,3); /* Safari */
transform: scale(2,3); /* 标准语法 */

skew()

语法

transform:skew(<angle> [,<angle>]);

包含两个参数值，分别表示X轴和Y轴倾斜的角度，如果第二个参数为空，则默认为0，参数为负表示向相反方向倾斜。

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

skew(30deg,20deg) 元素在X轴和Y轴上倾斜20度30度。

transform: skew(30deg,20deg);
-ms-transform: skew(30deg,20deg); /* IE 9 */
-webkit-transform: skew(30deg,20deg); /* Safari and Chrome */

matrix()

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

transform:matrix(0.866,0.5,-0.5,0.866,0,0);
-ms-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* IE 9 */
-webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Safari and Chrome */

参考链接：www.runoob.com/css3/css3-2…

2D 转换方法

函数	描述
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()

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

 transform: rotateX(120deg);
 -webkit-transform: rotateX(120deg); /* Safari 与 Chrome */

rotateY()

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

transform: rotateY(130deg);
-webkit-transform: rotateY(130deg); /* Safari 与 Chrome */

transform-style 属性

语法

transform-style: flat|preserve-3d;

值	描述
flat	表示所有子元素在2D平面呈现。
preserve-3d	表示所有子元素在3D空间中呈现。

参考：www.runoob.com/cssref/css3…

perspective 属性透视

多少像素的3D元素是从视图的perspective属性定义。这个属性允许你改变3D元素是怎样查看透视图。

定义时的perspective属性，它是一个元素的子元素，透视图，而不是元素本身。

**注意：**perspective 属性只影响 3D 转换元素。

提示: 请与 perspective-origin 属性一同使用该属性，这样您就能够改变 3D 元素的底部位置。

语法

perspective: number|none;

值	描述
number	元素距离视图的距离，以像素计。
none	默认值。与 0 相同。不设置透视。

参考：www.runoob.com/cssref/css3…

3D 转换方法

函数	描述
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 转换元素的透视视图。

八过渡

CSS3中，我们为了添加某种效果可以从一种样式转变到另一个的时候，无需使用Flash动画或JavaScript。用鼠标移过下面的元素：

添加了宽度，高度和转换效果：

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

下表列出了所有的过渡属性:

属性	描述	CSS
transition	简写属性，用于在一个属性中设置四个过渡属性。	3
transition-property	规定应用过渡的 CSS 属性的名称。	3
transition-duration	定义过渡效果花费的时间。默认是 0。	3
transition-timing-function	规定过渡效果的时间曲线。默认是 "ease"。	3
transition-delay	规定过渡效果何时开始。默认是 0。	3

 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: width 1s linear 2s;
    /* Safari */
 -webkit-transition:width 1s linear 2s;

九动画

CSS3 可以创建动画，它可以取代许多网页动画图像、Flash 动画和 JavaScript 实现的效果。

要创建 CSS3 动画，你需要了解 @keyframes 规则。

@keyframes 规则是创建动画。

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

@keyframes myfirst
{
    from {background: red;}
    to {background: yellow;}
}
 
@-webkit-keyframes myfirst /* Safari 与 Chrome */
{
    from {background: red;}
    to {background: yellow;}
}
div
{
	width:100px;
	height:100px;
	background:red;
	animation:myfirst 5s;
	-webkit-animation:myfirst 5s; /* Safari and Chrome */
}

动画是使元素从一种样式逐渐变化为另一种样式的效果。

您可以改变任意多的样式任意多的次数。

请用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%。

0% 是动画的开始，100% 是动画的完成。

为了得到最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器。

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

下面的表格列出了 @keyframes 规则和所有动画属性：

属性	描述	CSS
@keyframes	规定动画。	3
animation	所有动画属性的简写属性。	3
animation-name	规定 @keyframes 动画的名称。	3
animation-duration	规定动画完成一个周期所花费的秒或毫秒。默认是 0。	3
animation-timing-function	规定动画的速度曲线。默认是 "ease"。	3
animation-fill-mode	规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。	3
animation-delay	规定动画何时开始。默认是 0。	3
animation-iteration-count	规定动画被播放的次数。默认是 1。	3
animation-direction	规定动画是否在下一周期逆向地播放。默认是 "normal"。	3
animation-play-state	规定动画是否正在运行或暂停。默认是 "running"。	3

div
{
    animation-name: myfirst;
    animation-duration: 5s;
    animation-timing-function: linear;
    animation-delay: 2s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-play-state: running;
    /* Safari 与 Chrome: */
    -webkit-animation-name: myfirst;
    -webkit-animation-duration: 5s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-delay: 2s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
    -webkit-animation-play-state: running;
}

简写

 animation: myfirst 5s linear 2s infinite alternate;
    /* Safari 与 Chrome: */
  -webkit-animation: myfirst 5s linear 2s infinite alternate;

十多列

布局

column-count
column-gap
column-rule-style
column-rule-width
column-rule-color
column-rule
column-span
column-width

列数量三列

 -webkit-column-count: 3; /* Chrome, Safari, Opera */
 -moz-column-count: 3; /* Firefox */
 column-count: 3;

间隔

 -webkit-column-gap: 40px; /* Chrome, Safari, Opera */
 -moz-column-gap: 40px; /* Firefox */
 column-gap: 40px;

列表边框样式

-webkit-column-rule-style: solid; /* Chrome, Safari, Opera */
-moz-column-rule-style: solid; /* Firefox */
 column-rule-style: solid;

列表边框厚度

-webkit-column-rule-width: 1px; /* Chrome, Safari, Opera */
    -moz-column-rule-width: 1px; /* Firefox */
    column-rule-width: 1px;

列表边框颜色

 -webkit-column-rule-color: lightblue; /* Chrome, Safari, Opera */
    -moz-column-rule-color: lightblue; /* Firefox */
    column-rule-color: lightblue;

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

-webkit-column-rule: 1px solid lightblue; /* Chrome, Safari, Opera */
    -moz-column-rule: 1px solid lightblue; /* Firefox */
    column-rule: 1px solid lightblue;

下表列出了所有 CSS3 的多列属性：

属性	描述
column-count	指定元素应该被分割的列数。
column-fill	指定如何填充列
column-gap	指定列与列之间的间隙
column-rule	所有 column-rule-* 属性的简写
column-rule-color	指定两列间边框的颜色
column-rule-style	指定两列间边框的样式
column-rule-width	指定两列间边框的厚度
column-span	指定元素要跨越多少列
column-width	指定列的宽度
columns	column-width 与 column-count 的简写属性。

十一图片

如果你需要自由缩放图片，且图片放大的尺寸不大于其原始的最大值，则可使用以下代码：

img {
    max-width: 100%;
    height: auto;
}

卡片式图片

div.polaroid {
    width: 80%;
    background-color: white;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

img {width: 100%}

div.container {
    text-align: center;
    padding: 10px 20px;
}


<div class="polaroid">
  <img src="rock600x400.jpg" alt="Norway" style="width:100%">
  <div class="container">
    <p>The Troll's tongue in Hardanger, Norway</p>
  </div>
</div>

滤镜

CSS filter 属性用为元素添加可视效果 (例如：模糊与饱和度) 。

img {
    -webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */
    filter: grayscale(100%);
}

响应式图片相册

由大到小设置

.responsive {
    padding: 0 6px;
    float: left;
    width: 24.99999%;
}

@media only screen and (max-width: 700px){
    .responsive {
        width: 49.99999%;
        margin: 6px 0;
    }
}

@media only screen and (max-width: 500px){
    .responsive {
        width: 100%;
    }
}

十二弹性盒子

使用弹性盒子，居中变的很简单，只需要设置 margin: auto; 可以使得弹性子元素在两上轴方向上完全居中:

参考链接：www.runoob.com/try/try.php…

align-self

align-self 属性用于设置弹性元素自身在侧轴（纵轴）方向上的对齐方式。

语法

align-self: auto | flex-start | flex-end | center | baseline | stretch

实例www.runoob.com/try/try.php…

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

十三 justify-content和 align-content 属性

justify-content 属性用于对齐容器内的网格，设置如何分配顺着弹性容器主轴(或者网格行轴) 的元素之间及其周围的空间。

**注意：**网格的总宽度必须小于容器的宽度才能使 justify-content 属性生效。

justify-content 弹性盒子和网格布局都用到的水平对齐

align-content 属性用于设置垂直方向上的网格元素在容器中的对齐方式。

**注意：**网格元素的总高度必须小于容器的高度才能使 align-content 属性生效。

css3相关练习

一 阴影设置

二 背景

三 渐变

四 文本效果

五 字体

六 2D转换 transform和transform-origin

七 3D转换

八 过渡

九 动画

十 多列

十一 图片

十二 弹性盒子

十三 justify-content和 align-content 属性

一阴影设置

二背景

三渐变

四文本效果

五字体

八过渡

九动画

十多列

十一图片

十二弹性盒子