CSS3 系统学习

边框：

圆角：border-radius:4px;

推荐使用4px，表示圆角的半径；如果设置为50%，元素就有可能是椭圆或者圆，取决元素的宽和高

最多可以有4个值分别确定四个角的圆角，border-radius: 15px/50px;椭圆

盒阴影：box-shadow: 10px 10px 5px 5px #888;

阴影实现原理：构造一个元素的影子，通过平移影子的位置来实现的

第一个参数：水平位置，必须

第二个参数：垂直位置，必须

第三个参数：模糊距离，可选

第四个参数：影子大小，可选，是在原有大小上，宽高各加上相应值

第五个参数：影子的颜色

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

使用边框图片背景的前提是你设置边框宽度，且颜色设置为transparent透明

第一个参数：图片来源

第二个参数：向内偏移

第三个参数：边界宽度

背景

background属性包含好几值，需要注意的是可以设置多张背景图片，比较常用的属性，不用细讲

渐变

属性前缀： -webkit-谷歌，-moz-火狐，-webkit-苹果浏览器（safari），-o-欧鹏浏览器 Ie不需要前缀

线性渐变： background: linear-gradient(direction,color-stop1);

background: linear-gradient(to right, red , blue);

direction描述方向，color多个颜色值

水平，垂直，都可以设置 to后面表示线的终点

使用角度进行定向变色：background: linear-gradient(angle, color-stop1, color-stop2);

上图只是表明ie的角度的计算方式，更多的使用的起点为水平向右为0deg，颜色的表达方式支持rgba

文本效果

文本阴影：text-shadow: h-shadow v-shadow blur color;text-shadow: 5px 5px 5px #FF0000;

与box-shadow效果相同，只是文本的阴影

文本溢出效果：text-overflow:ellipsis;

可以使用clip(截断)，ellipsis(以省略号代替)，还可以使用自己定义string代替被修剪的文本(好像并不能行)

英文换行：word-break:break-all;非中日韩的都可以

normal浏览器默认换行规则，break-all 允许单词内换行，keep-all 不能断单词，连字符可以断

换行：word-wrap: normal|break-word;

normal浏览器默认换行规则，break-all 允许词内换行

特殊要求才会用到换行

字体

@font-face
{
    font-family: myFirstFont;//自定义字体名字，必须
    src: url(sansation_light.woff);//字体文件路径，必须
}

@font-face
{
	font-family: myFirstFont;//同一字体名
	src: url(sansation_bold.woff);
	font-weight:bold;//本规则的字体促销
}
 
div
{
    font-family:myFirstFont;
    font-weight:bold;调用第二规则的字体
}

还可以为字体规则设置font-stretch，font-style，font-weight，unicode-range，来决定何时调用该字体

css3更多知识需要使用单独博客进行详细讲解

多列

多列是把一个块级元素分成多列，下面属性是来控制这些列的样式的

-webkit-, -ms- 或 -moz- 使用后缀

属性名	描述	值
column-count	指定元素应该被分割的列数。	数字，auto
column-fill	指定如何填充列	支持率低不建议使用
column-gap	指定列与列之间的间隙	normal，宽度值
column-rule	所有 column-rule-* 属性的简写	设置分别的值
column-rule-color	指定两列间边框的颜色	色值
column-rule-style	指定两列间边框的样式	和边框值相同
column-rule-width	指定两列间边框的厚度	thin,medium,thick,宽度值
column-span	指定元素要跨越多少列	数字，all
column-width	指定列的宽度	每列宽度，auto
columns	设置 column-width 和 column-count 的简写

用户界面

resize：允许调整元素的宽高

resize: none|both|horizontal|vertical:

值	描述
none	用户无法调整元素的尺寸。
both	用户可调整元素的高度和宽度。
horizontal	用户可调整元素的宽度。
vertical	用户可调整元素的高度。

box-sizing: content-box|border-box|inherit: 设置盒子的宽高模式

值	说明
content-box	这是 CSS2.1 指定的宽度和高度的行为。指定元素的宽度和高度（最小/最大属性）适用于box的宽度和高度。元素的填充和边框布局和绘制指定宽度和高度除外
border-box	指定宽度和高度（最小/最大属性）确定元素边框。也就是说，对元素指定宽度和高度包括了 padding 和 border 。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。
inherit	指定 box-sizing 属性的值，应该从父元素继承

outline-offset: length|inherit:        outline到border的距离

多媒体查询

@media screen and (max-width: 699px) and (min-width: 520px) {}