一、边框圆角属性: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();/*引入字体链接*/
}