css属性.docx

1、css属性CSS3新属性1.css2中的背景属性Background-color 背景颜色Background-image 背景图片Background-position 背景图片的位置Background-position-x 背景图片的x位置Background-position-y 背景图片的y位置Background-repeat 背景图片的重复方式Background-attachment 背景图片的绑定方式Background:背景图片的综合属性设定CSS3中新增的属性：多背景属性格式：background:url (图片地址) 重复设定 定位属性 等,url (图片地址) 重复设

2、定 定位属性 等,url (图片地址) 重复设定 定位属性 等.Background-origin： 背景原点定位属性Padding-box:padding开始的位置为原点(默认)Border-box 从最外面边框开始的位置为原点Content-box：从内容开始的位置为原点Background-clip: 背景图片切割属性Border-box 从边框开始切割（默认，不切割）Padding-box padding向外(边框)的内容不现实Content-box: 内容向外(边框和padding)不显示text :文字切割(需要使用浏览器前缀)Background-size:设置背景图片的大小值为

3、长度单位即可Auto背景图片原始大小 默认值cover 适当缩放图片使得图片刚好能覆盖元素contain 适当缩放图片使得元素刚好包含图片关于颜色CSS2中的颜色表示方式英文单词:red,green,blue,pink.rgb模式: rgb(红色值,绿色值,蓝色值) 所有值为0-255HEX模式:#红色值绿色值蓝色值 (所有值为00-FF)CSS3中新增的颜色表示方式rgba模式增强的RGB模式，在RGB模式的基础上增加了A值，A表示透明度，取值为0-1之间的数值，0为完全透明，1为完全不透明格式:rgba(红色值,绿色值,蓝色值,透明度)hsl模式HSL模式也叫做色轮模式H 色调 选择颜色种

4、类 取值0-360S 饱和度 0% -100%L 亮度 0%-100%注意：HSL模式的目的是为了无限的接近自然界颜色种类的表示方式。hsla模式在HSL模式的基础上添加的透明度值的新的颜色表示方式H 色调 选择颜色种类 取值0-360S 饱和度 0% -100%L 亮度 0%-100%A 透明度 0-1之间的小数新的颜色属性Opacity:设置透明度属性设置元素的透明值，取值为0-1之间的小数新的颜色值Transparent 透明 属于英文单词颜色关于浏览器前缀浏览器:IE浏览器 -ms- 前缀火狐浏览器 -moz- 前缀chrome浏览器 -webkit-前缀safari浏览器 -webk

5、it-前缀opera浏览器 -o-前缀标准的实验性质属性书写规范：-webkit-CSS属性;-moz-CSS属性;-o-CSS属性;-ms-CSS属性;CSS属性;新的图像表示方式渐变:分为四种 线性渐变、径向渐变、重复的线性渐变和重复的径向渐变。注意：渐变本质是图像。不是一种颜色。线性渐变最简单的颜色渐变Linear-gradient(开始颜色,结束颜色);改变方向的颜色渐变Linear-gradient(方向,开始颜色,结束颜色);注意：方向值可以使用位置单词，一共八个方向，left.right.,top,bottom,left top,left bottom,right top,rig

6、ht bottom。多颜色渐变Linear-gradient(方向,开始颜色,中间色.,结束颜色)制定渐变颜色的位置Linear-gradient(方向,开始颜色 位置点,中间色 位置点.,结束颜色 位置点)注意：位置点可以是像素可以是百分比，只要是长度就行.径向渐变最简单的径向渐变Radial-gradient(开始颜色,结束颜色)带有制定原点Radial-gradient(原点,开始颜色,结束颜色)注意:原点为坐标，可以是像素可以是百分比也可以是英文单词.设定渐变的形状Radial-gradient(原点,形状,开始颜色,结束颜色)circle 圆形ellipse 椭圆形默认值设定渐变的大

7、小Radial-gradient(原点,形状 大小,开始颜色,结束颜色)Closest-side 最近的边Closest-corner 最近的角Farthest-side 最远的边Farthest-corner 最远的角cover 覆盖contain 包含多颜色渐变Radial-gradient(原点,形状 大小,开始颜色,中间色.结束颜色)制定渐变颜色的位置Radial-gradient(原点,形状 大小,开始颜色 位置点,中间色 位置点.结束颜色 位置点)重复的线性渐变Repeating-linear-gradient(方向,开始颜色,中间色.结束色 位置点)注意：结束颜色的位置点决定渐变

8、的重复次数，例如,50%重复2次，20%重复5 次重复的径向渐变Repeating-radial-gradient(方向,开始颜色,中间色.结束色 位置点)注意：结束颜色的位置点决定渐变的重复次数，例如,50%重复2次，20%重复5 次角度单位：deg 度，一个圆周为360度turn 圈/周 一个圆周就是1turngrad 梯度 一个圆周400梯度rad 弧度 一个圆周2N弧度(基本不用.)文本属性:text-transform:设定大小写转换的属性auto 原始大小capitalize 首字母大写uppercase 转化为大写字母lowercase 转化为小写字母full-width 适用于

9、拉丁字符.white-space:设置元素内部空白字符的处理方式normal 正常nowrap 强制内容超过元素不换航pre 设置元素内部空白为与格式化模式，超过不换航Pre-wrap: 设置元素内部为预格式化模式，超出换行Tab-size:设置tab键的长度值为整数或者长度单位注意：设置整数值表示tab键的N倍。Letter-spacing 设置字符间距值为长度单位（对汉字有效）Word-spacing 设置单词间距值为长度单位(对汉字单词无效)Word-break:设置是否允许在一个单词内部断开换行normal 正常break-all 允许断开单词Word-wrap:设置一行内单词的断开设

10、置(overflow-wrap)normal 正常Word-break:允许单词断开注意：word-break属性是在元素的边界处直接断开单词。Word-wrap如果能够换行就换行处理，没办法时就断开单词。Text-fill-color:设置 文字的填充颜色Text-stroke:设置文字的描边效果格式：text-stroke:颜色 粗细Text-stroke-width:设置描边的宽度Text-stroke-color:设置描边的颜色边框背景图片边框背景图片切割及对应视图Border-image-source 设置边框背景图像的资源格式：border-image-source:url(图片地

11、址)Border-image-width:设置边框背景图像的宽度值为长度值border-image-slice:设置用于当作背景图的切割点注意:改值默认单位为像素，但是不可以添加单位，避免和宽度冲突。Border-image-repeat:设置边框背景图片的重复或者覆盖方式stretch 拉伸（默认值）repeat 重复图片round 重复图片，保证图片个数为整数个，会进行适当的缩放Border-image-outset:设置边框背景图片的外移值。值为长度单位Border-image:边框背景图片的综合设定属性格式：Border-image:url(图片地址) 切割点/宽度 重复边框圆角属性：

12、Border-radius:一次性设置四个角的圆角格式1：（四角）Border-radius:一个值设定所有角的水平和垂直半径都是当前这个值格式2：(对角线)Border-radius:值1 值2;设置左上角和右下角的水平和垂直半径为值1设置右上角和左下角的水平和垂直半径为值2格式3:Border-radius:值1 值2 值3;设置左上角的水平和垂直半径为值1.设置右上角和左下角的水平和垂直半径为值2设置右下角的水平和垂直半径为值3格式4;Border-radius:值1 值2 值3 值4：从左上角到左下角顺时针的设定每个角的水平和垂直半径分别为值1值2值3值4.格式5:格式5：（四角）Bo

13、rder-radius:值1/值2设置四个角的每个角的水平半径为值1，垂直半径为值2备注：在格式5的基础上值1可以变为1-4个值，值2也可以写成1-4个值分别表示每个角的设定方式。综合起来border-radius一共20种设定方式Border-top-left-radius：设置左上角的圆角格式：一个值的设置方式Border-top-left-radius:水平和垂直半径值;两个值的设置方式Border-top-left-radius:水平半径值 垂直半径值;Border-top-right-radius设置右上角的圆角格式：一个值的设置方式Border-top-right-radius:水

14、平和垂直半径值;两个值的设置方式Border-top-right-radius:水平半径值 垂直半径值;Border-bottom-left-radius设置左下角的圆角格式：一个值的设置方式Borde-bottom-left-radius:水平和垂直半径值;两个值的设置方式Border-bottom-left-radius:水平半径值 垂直半径值;Border-bottom-right-radius:设置右下角的圆角格式：一个值的设置方式Border-bottom-right-radius:水平和垂直半径值;两个值的设置方式Borde-bottom-right-radius:水平半径值 垂直

15、半径值;定位属性：clip 定位元素切割属性auto 默认不切割rect 矩形切割Rect(上,右，下，左)上值：从上倒下切多少下值：从上到下留多少左值：从左到右切多少右值：从左到右留多少注意：当前属性仅在元素是绝对定位时有效。尺寸属性：Width:设置元素内容的宽度Height:设置元素内容的高度Max-width:设置元素的最大宽度Max-height:设置元素的最大高度当前元素没有内容时，高度为0，添加内容后，元素会变高，但是一旦达到了最大高度，则不再继续变大，内容会超过元素。Min-width:设置元素的最小宽度。Min-height：设置元素的最小高度当元素没有内容或者内容高度没有达

16、到最小高度时，元素默认为最小高度，一旦内容超过元素的最小高度，则会增加元素的高度用来包含内容。注意:min和max的宽度设置较少使用。盒子大小：Box-sizing: 设置接受宽高的盒子的位置Content-box :宽高为盒子的content部分设定(默认)Border-box:宽高为盒子的所有部分(border、padding、content)设定，增加边框或者padding都会使得content发生变化文本修饰：Text-decoration:文本修饰属性Text-decoration-line:设定文本修饰线的位置underline 下划线 overline 上划线 line-thro

17、ugh 删除线text-decoration-color:设定文本修饰线的颜色Text-decoration-style:设定文本修饰线的风格值和边框的风格一样。Text-shadow: 设置文字的阴影属性格式：text-shadow:水平偏移 垂直偏移 模糊程度 颜色。盒子阴影Box-shadow: 设置元素的阴影格式：box-shadow:水平偏移 垂直偏移 模糊程度 增大尺寸 颜色 内置阴影.书写模式：Writing-mode:设置文本的书写方向Lr-tb 从左到右，从上到下书写Tb-rl 从上倒下，从右到左书写。direction：设置文本流的方向ltr 正常方向，从左到右rtl 从右

18、到左Unicode-bidi 设置文本内容的显示方向normal 正常Override-bidi:设置和direction方向一致用户界面：Cursor 设定鼠标的样式值：有很多pointer 小手none 原装箭头move 十字键头Url(图片地址) x y ,pointer Ime-mode:设置输入法切换方式值：auto 任意切换输入法disabled 禁止切换输入法，只能输入英文Outline 轮廓线综合属性Outline-style:设置轮廓线的样式值和边框样式一样。Outline-width 设置轮廓线的宽度Outline-color 设置轮廓线的颜色Outline-offset

19、设置轮廓线的偏移位置注意：默认位置为0，在边框之外，可以设置正数或者负数，向外或者向内移动轮廓线，常用在表单中。Resize:设置元素的可调整大小属性none 禁止调整大小 除了textarea都是默认值both 可以水平和垂直方向调整 textarea的默认值horizontal 水平方向可以调整vertical 垂直方向可以调整text-overflow:设置文本溢出的处理方式（文本本身）Clip:超出文字切割处理Ellipsis:超出部分变成.Zoom:设置元素的放大或者缩小倍数。值为整数或者小数，用来表示扩大或者缩小的倍数。尽量不要使用该属性改变元素大小。User-select:设定用

20、户是否可以选中文本内容none 禁止选中所有内容text 仅允许选中文本element 可以选中文本单受范围约束All: 可以选中所有内容注意：ie69-都无法实现该属性，但是可以使用事件解决，onselectstart=”return false”变换属性Transform-origin：设置元素的变换的原点位置transform：设置元素的变换属性none 不变换rotate() 设置元素的旋转角度格式：rotate(角度值)scale() 设置元素的缩放变换格式：scale(水平缩放倍数,垂直缩放倍数)ScaleX()设置元素水平方向的缩放变换格式：scaleX（倍数）ScaleY()设

21、置元素的垂直方向缩放变换格式：scaleY（倍数）Translate() 设置元素的平移变化格式：translate(水平位移,垂直位移)TranslateX() 设置元素水平方向的平移变化格式：translateX（长度）TranslateY()设置元素垂直方向的平移变化格式：translateY（长度）Skew() 设置元素在x轴和y轴的扭曲方式格式：skew(x轴角度,y轴角度)SkewX() 设置元素在x轴的扭曲方式格式：skewX(角度)SkewY() 设置元素在y轴的扭曲方式格式：skewY(角度)matrix() 矩阵变换格式：matrix(水平伸缩比例,纵向扭曲,横向扭曲,垂直

22、伸缩比例,水平偏移量,垂直偏移量)matrix的默认值为matrix(1,0,0,1,0,0)过度属性：transition 设置元素的过度属性格式：Transition:变换的属性 变换的时间 变换的方法 延迟开始时间格式：Transition:变换的属性 变换的时间 变换的方法 延迟开始时间,变换的属性 变换的时间 变换的方法 延迟开始时间,变换的属性 变换的时间 变换的方法 延迟开始时间,.Transition-delay:设置变换开始之前的等待时间(延迟)Transition-duration :变换的过度时间Transition-property:设置变换的css属性none 无属性

23、参与过度all 制定所有css属性某个属性 transition-timing-function:设置变换的函数(方法)linear 线性过度ease 平滑过度Ease-in 由慢到快Ease-out 由快到慢ease-in-out 先慢在快再慢动画属性：Animation: 动画的综合属性设定Animation-name:设定动画的名称注意，要和keyframe语法一起使用 animation-duration :设置动画的播放时间值为时间，单位一般用秒animation-timing-function:设置动画的过度方式linear 线性过度ease 平滑过度ease-in 由慢到快Eas

24、e-out 由快到慢ease-in-out 由慢到快再到慢cubic-bezier(): 自定义贝塞尔曲线animation-delay :设置动画开始的延迟时间值的开始播放动画之前的延迟事件animation-iteration-count :设定动画播放的次数可以写整数次，也可以也infinite (无限次)animation-direction :动画播放的方式是否允许反向normal 正常，不反向alternate 可以反向播放多列布局：column-count:设置列的数量设置列数，宽度自动调整column-width:设置列的宽度设置宽度，列数自动调整column-gap:设置列与

25、列之间的间隙值为长度单位column-rule:设置列与列之间的分割线的样式宽度和颜色column-rule-style设置列与列之间的分割线的样式solid 实线dashed 虚线double双线和border的取值基本一致column-rule-width设置列与列之间的分割线的宽度column-rule-color设置列与列之间的分割线的颜色column-fill：设置每列的高度是否一致Auto:自动设置Balance:统一每列的高度注意：基本没浏览器支持.,column-span:设置元素的跨列属性none 不横跨所有列all 横跨所有列，一般用于标题设置column-break-af

26、ter:在制定元素的列尾部设置是否断行auto：默认值，自动设定如果有空间就跟随Always:强制断行，不允许其他元素在该元素后跟随column-break-before:设置元素的头部是否断行auto：默认值，自动设定如果有空间就跟随Always:强制断行，不允许其他元素在该元素前跟随column-break-inside:暂不支持Columns:用于设置列的宽度或者列的数量属性注意：同时只能设置一个属性数量或者宽度，同时设置无效。伸缩盒子模型Flex-grow:设置盒子的扩展比率值是数字每个元素的扩展空间=总剩余空间/（子元素比例和）*当前元素的比例；Flex-shrink:设置盒子的收缩

27、比例每个元素的收缩空间=总超出空间/（子元素的比例和）*当前元素的比例Flex-direction:设置子元素的排列方式row 横向排列Row-reverse 横向倒序排列column 纵向排列Column-reverse 纵向倒序排列Flex-wrap:设置超出的元素的换行方式Nowrap:不换航处理，伸缩子元素Wrap:超出的子元素换行Wrap-reverse 超出子元素反向换行(原行和超出行 交换位置)Flex-flow:设置元素的换行及超出处理方式格式：flex-flow:方向 换行处理方式Order: 设置子元素在伸缩盒子内的排列顺序值为数字，可以正数可以负数，数值越大越靠后。Ali

28、gn-items:设置子元素的在纵轴方向的对齐方式stretch 拉伸子元素占满位置(默认)Flex-start 伸缩盒子的开始位置(注意方向) Flex-end 伸缩盒子的结束位置(注意方向) center 伸缩盒子的中间位置(注意方向) baseline 效果和flex-start基本一致注意：要设置在伸缩盒子的外层盒子上而非子元素上Align-slef:设置当前元素在伸缩盒子内的纵轴的对方i方式auto 默认值stretch 拉伸子元素占满位置Flex-start 伸缩盒子的开始位置(注意方向) Flex-end 伸缩盒子的结束位置(注意方向) center 伸缩盒子的中间位置(注意方向) baseline 效果和flex-start基本一致注意：要设置在伸缩盒子的子元素上而非外层盒子Justify-content:设置伸缩盒子的子元素的水平对齐方式Flex-start 伸缩盒子的开始位置Flex-end 伸缩盒子的结束位置center 伸缩盒子的中间位置Space-between 伸缩盒子的两端对齐位置Space-around 每个子元素平均分布在盒子中Flex-basis 设置元素的伸缩基准值值为长度如果元素的所有基准值超过总盒子的长度，所有子元素会按照基准值的比例伸缩子元素。