12.4css页面背景样式

一,背景图片与背景颜色的样式

对于背景图片的处理,我们有以下几种方式

1,no-repeat:不平铺

2,repeat-x:x轴方向

3,repeat-y:y轴方向平铺

4,repeat: x与y轴方向都平铺(默认方式) 需要设置面的值,我们需要另外的属性background-repeat 需要移动背景图 需要使用background-position,它是通过坐标轴设置

1,left top/bottom/center;左上、下角、中间

2,right top/bottom/center;右上、下角、中间 以上属性可以使用background




    
    背景图片样式设置
    



    
    背景颜色的样式
    

background -color直接定义颜色,position进行定位

二、边框属性

指定边框可使用border-left/right/top/bottom-color来设置颜色,style指定样式 width指定宽度

 在实际开发中,border属性统一制定即可 border:线的宽度样式颜色

缺点:开地图炮 

1,外边距属性

容器与容器距离为外边距 margin属性指定,使用语法参考padding 设置四值,上左右下 设置两个值,上下左右 设置一个值,四个值都是一样的。

2,内边距属性

内容与边界的距离为内边距 设定用padding属性设置,上下左右各不相同 设置四值,上左右下 设置两个值,上下左右 设置一个值,四个值都是一样的。

三、圆角、阴影与浮动

1、圆角

圆心到圆角的距离,设为半径,浏览器设定不同的值,以px为单位,也可以使用百分比

四个角可以用不同的值,展示出不一样的图

2、阴影

定义阴影用box-shadow属性

h-shadow v-shadow blur spread color position

水平 垂直 模糊距离 阴影尺寸 颜色

默认都是内部阴影




    
    阴影
    

3、浮动

默认情况下,li内容是竖着显示,若横,则需要浮动 使用float属性定义:

它有两个值: left左浮动

                    right右浮动

你可能感兴趣的:(css,css3,html)