码迷,mamicode.com
首页 > Web开发 > 详细

css的一些总结

时间:2016-08-14 17:36:31      阅读:129      评论:0      收藏:0      [点我收藏+]

标签:

(给自己看的总结)

边框样式

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的简写规则是颜色 图片 平铺 定位 (多重背景用逗号隔开)

 

css的一些总结

标签:

原文地址:http://www.cnblogs.com/zhiwudenengliang/p/5770258.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!