一、边框圆角属性: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);从中心向外扩散,颜色后面加空格控制颜色占用的比例,同样每个颜色用逗号隔开
background: radial-gradient(circle,red,green,yellow)从中心以圆形向外扩散
七、文本text-overflow属性
overflow:hidden;溢出的内容裁剪隐藏
white-space:nowrap;文本不会换行,在同一行继续
text-overflow:ellipsis;用省略号来代表被裁剪的文本
八、text—shadow
h-shadow 水平阴影 必需
v -shadow 垂直阴影 必需
blur 模糊距离 可选
color 阴影颜色 可选
九、字体引入@font-face
@font-face {
font-family: mafont;给自己定义的字体取名字
src: url();引入字体链接
}