css3基础

一、边框圆角属性：border-radius:

border-radius:0px 1px 2px 0px;
/*四个属性为：左上、右上、右下、左下*/
border-radius：0px 5px 0px;
/*三个值为：左上、右上/左下、右下*/
border-radius：10px 2px;
/*两个值为：左上/右下、右上/左下*/

二、盒子阴影：box-shadow:

box-shadow: 10px 10px 20px blue inset;
/*第一个值为x轴阴影，第二个值为y轴阴影，第三个值为模糊半径大小，inset 设置为内阴影*/
/*不设置inset 默认是外阴影*/

三、ul li的样式list-style-type:

list-style-type: none;/*去除点效果*/
list-style-type: circle;/*点设置为空心圆*/
list-style-type: decimal;/*点设置为数字*/
list-style-type: disc;/*设置点为实心圆/默认样式*/
list-style-type: disclosure-closed;/*设置点为树形图的关闭箭头*/
list-style-type: disclosure-open;/*设置点为树形图打开箭头*/

四、背景属性background-size：

background-size: lenght;/*设置背景图片高度和宽度。第一个值设置宽度，第二个值设置高度，如果只设置一个值，那么第二个值就是auto自动*/
background-size: percentage;/*将计算相对于背景定位区域的百分比。设置同上*/
background-size: cover;/*此时会保持图像的丛横比例，并将图像缩放完成将完全覆盖背景定位区域的最小大小*/
background-size: contain;/*此时会保持图像的丛横比例，并将图像缩放完成将完全覆盖背景定位区域的最大大小*/

五、线性渐变background:linear-gradient

background:linear-gradient（to top,red,green,yellow）
/*linear-gradient(to ‘方位’,)to后面写渐变朝向 用逗号隔开后写颜色，每个颜色都用逗号隔开*/

六、径向渐变background: radial-gradient

background: radial-gradient(red 5%,green,yellow);
/*从中心向外扩散，颜色后面加空格控制颜色占用的比例，同样每个颜色用逗号隔开*/

七、文本text-overflow属性

overflow:hidden;/*溢出的内容裁剪隐藏*/
white-space:nowrap;/*文本不会换行，在同一行继续*/
text-overflow:ellipsis;/*用省略号来代表被裁剪的文本*/

八、字体引入@font-face

@font-face {
        font-family: mafont;/*给自己定义的字体取名字*/
        src: url();/*引入字体链接*/
    }