边框、背景、文本模型

边框、背景、文本模型

1、圆角

1、css3新增圆角边框样式，可以使矩形盒子变成圆角
2、属性：border-radius，边框-半径。
3、圆形和矩形相切的角度
4、正方形变成圆形可以设两个值：一种是设为正方形的宽或者高的一半像素，一中是设为50%
5、每个角可以分开设置
         border-top-left-radius: 20px;
         border-top-right-radius: 30px;
         border-bottom-right-radius: 40px;

2、盒子阴影

1、css3中新增了盒子阴影，可以使用box-shadow属性为盒子添加阴影
2、 box-shadow属性
        h-shadow：必须，水平阴影的位置，允许负值
        v-shadow：必须，垂直阴影的位置，允许负值 
        blur：可选，模糊距离:影子的模糊设置
        spread：可选，阴影的尺寸
        color：可选，阴影的颜色
        inset:可选，将外部阴影改为内部阴影
        默认是外阴影。但不可以写出来。可以设置，      

3、文字阴影

1、在css3中，可以使用text-shadow属性将阴影应用于文本
2、     h-shadow：必须，水平阴影的位置，允许负值
        v-shadow：必须，垂直阴影的位置，允许负值 
        blur：可选，模糊距离:影子的模糊设置
        color：可选，阴影的颜色

4、背景

1、通过css背景属性，可以给页面元素添加背景样式，背景属性可以设置背景颜色，背景图片，背景平铺，背景    图片位置、背景图像固定等等。
2、backgroun-image：设置背景图片，必须添加url（）
3、这个属性描述了元素的背景图像，常见于logo或者一些装饰的小图片，便于控制
4、url：使用绝对或相对地址指定背景图像
5、background-repeat：背景平铺
6、背景平铺，有四个值：平铺，不平铺，沿着x轴、y轴平铺
7、背景图片可以压住背景颜色
8、background-position：改变图片在背景中的位置
9、  background-position：x,y. 两个坐标，可以使用方位名词或者精确单位
10、position：top、center、bottom、left、right、
11、background-position 注意 如果参数是方位名词，则两个词前后顺序无关，
             如果只有一个方位名词，y轴垂直居中  
             如果第一个参数是top，y轴顶部对齐，第二个参数省略
             x轴水平居中
12、background-position 精确单位 就是距离盒子的距离
    background-position: 50px 100px;
13、background-position混合单位，如果方位名词和精确单位混合，第一个是x坐标，然后是y坐标
   background-position: center  100px;
14、background-attachment：背景固定：设置背景图像是否固定或者随着页面的其余部分而滚动
15、background-attachment：属性
   scroll：背景图像随着对象内容滚动
   fixed：背景图像固定
16、背景复合：背景颜色、背景图片地址，背景平铺、背景图像滚动、背景图片位置都可以在一个属性里面设              置：background
17、border-image：可以设定边框背景为指定图片
     /* 属性:边框背景图片路径    */
    border-image-source: url(../img/wzry/10.jpg);
    /* 图片边框向内偏移 */
    border-image-slice: 0;
    /* 图片边框宽度 */
    border-image-width: 10;
    /* 边框图像区域超出边框的量 */
    border-image-outset: 10;
    /* 平铺，round铺满。拉伸stretch */
    border-image-repeat: repeat;
18、background-size 设置背景图片大小。
    length	设置背景图片高度和宽度。第一个值设置宽度，第二个值设置的高度。
        如果只给出一个值，第二个是设置为 auto(自动)
    percentage	将计算相对于背景定位区域的百分比。第一个值设置宽度，
            第二个值设置的高度，各个值之间以空格 隔开指定高和宽，以逗号 , 
            隔开指定多重背景。如果只给出一个值，第二个是设置为"auto(自动)"
   cover	 此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。
   contain	此时会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小。
19、background-origin：规定背景图片的定位区域
       padding-box：背景图像相对于内边距框来定位
       border-box：背景图像相对于边框盒来定位
       content-box：背景图像相对于内容框来定位
20、8、background: black url(../img/wzry/20.jpg) no-repeat center center  ;

5、文本效果

1、单行文本一处显示省略号，必须设置一下属性
     /* 强制一行内显示文本 */
     white-space: nowrap;   （normal默认自动换行）
     /* 超出的部分隐藏 */
     overflow: hidden;
     /* 文字用省略号显示超出部分 */
     text-overflow: ellipsis;
 2、多行文本溢出显示省略号，有很大的兼容性问题，适合webkit浏览器或移动端。
           /*溢出部分隐藏  */
            overflow: hidden;
            /* 文字用省略号显示超出部分 */
            text-overflow: ellipsis;
            /* 弹性伸缩盒子模型显示 */
            display: -webkit-box;
            /* 显在一个块元素显示的文本的行数 */
            -webkit-line-clamp: 2;
            /* 设置或检索伸缩盒对象的子元素的排列方式 */
            -webkit-box-orient: vertical;

            /* 不合适的话就调整盒子的高度 */
3、 允许单词自己换行 word-wrap
           /* 允许对单词进行拆分 */
            word-wrap: break-word;