CSS新增样式4

标签：break   火狐   坐标   gradient   round   die   存在   结合   contain   

1.阴影：box-shadow:none(无阴影)

                                  inset(显示阴影在里面)，写法：box-shadow:inset/outset(外阴影)     px(阴影水平偏移值) px(阴影垂直为负)  px(阴影模糊值不为负) color；

             总结：三个数值时，阴影的外延值就不存在了；两个数值时，阴影的模糊度和外延值就不存在了，默认颜色为黑色，水平偏移值和阴影垂直大于0出现在左和上，小于0出现                              在右和下 。

2.圆角：border-radius:px(上) px(右) px(下) px(左)；如果要设置椭圆代码如下：

                                                                                                                         例：width:100px; height:200px;   border-radius:100px/200px(正椭圆)

3.边框图片background-image: {a.source(路径) b.slice(分割方式) c.width（宽度 ）d.outset(扩展) e.repeat(平铺方式) f.strech(拉伸)}

4.背景滚动或固定：background-attachment

5.背景大小 ：background-size:cover(被包含在容器内，在整个框内显示，不标准，等比例缩放)/contain(图片完全放置在容器内)

6.裁剪：background-clip:border-box(向外裁剪)/padding-box(在边框以内)/content-box(包含内容包含padding)

7.背景线性渐变：谷歌写法：background：-webkit-gradient     linear(值的名称)   x ,y(两个坐标开始)  x,y(两个坐标结束)，from(red) to(blue)【从一个颜色向另一个颜色渐变】

                            火狐：background:-moz-linear-gradient(top,red,blue)

                            opera:background:-o-linear-gradient(top,red,blue)

                            IE:-ms-linear-gradient 后面同上

8.文本效果

                1.阴影：text-shadow

                2.文本溢出：text-overflow      ellipsis显示省略标记，需要结合overflow:hidden和white-space:nowrap不换行。

                3.连续文本换行：word-wrap{a.normal默认  b.break-word在边界内换行，如果需要词内也可换行

                4.文本轮廓：text-outline绝大多数浏览器不兼容 

CSS新增样式4

标签：break   火狐   坐标   gradient   round   die   存在   结合   contain   

原文地址：http://www.cnblogs.com/waitingforbb/p/7066816.html