(给自己看的总结)
边框样式
1. border-width 边框宽度 比如:1px
2. border-color 边框颜色
3. border-radius 圆角边框 比如 20px 100px/50px (斜杠后面的数字可以视为比值)
4. border-style 边框样式 比如 solid实线 dotted点状线 dashed虚线 double双实线 none无 等
border的简写规则是必须要有width color style
5. border-image 边框图片(看成是边框的背景就行了 使用这个的话 style无效 某些浏览器不支持)比如:url(xxx.jpg) 10(这个是关于图像的缩放 本来就有缩放 这个值还不太会控制)/10px(相当于宽度)
盒子阴影
1. box-shadow 盒子阴影 比如:5px(x轴偏移) 5px(y轴偏移)5px(blur:模糊距离) #f00(颜色)
段落样式
1. line-height 行高 比如12px 120%
2. text-indent 首行缩进
3. text-align 对齐方式(不仅是文本,对象中的其它inline或inline-block元素也能够被text- align进行对齐方式的设置)比如:center
4. letter-spacing 文本之间的间距 比如:5px
5. text-overflow 溢出设置(特指文本)比如:clip(溢出裁剪)或者这三个联动使用overflow: hidden(隐藏); white-space: nowrap(强制一行显示);text-overflow: ellipsis(溢出部分替换为...);
6. word-wrap 段落换行(把值设定为break-word可以单词内部自行断行) 比如:normal(不断行)
背景篇
1. background-color 背景颜色 比如:#f00 或rgba(255,0,0,1)r红 g绿 b蓝 a透明度(1~0)和 linear-gradient :渐变颜色(to left(方向 也可以写45deg 等是指度), red 30%(分界线),blue)
2. background-image 背景图片 比如:url(1.jpg)
3. background-repeat 背景图片平铺方式 比如:repeat平铺 no-repeat不平铺 repeat-x水平平铺 repeat-y垂直平铺
4. background-position 背景定位 比如:left bottom 30%(x轴) 20px(y轴)
5. background-origin 背景原点 比如:border-box从边框开始 padding-box从内边距开始 content-box从内容开始
6. background-size 背景尺寸 比如:30px 或120%
7.background-attachment:背景是否跟随滚动条滚动 比如:scroll 默认 fixed不随滚动条滚动
background的简写规则是颜色 图片 平铺 定位 (多重背景用逗号隔开)