代码改变世界

CSS新增样式4

2017-06-22 19:23  陪李一起  阅读(192)  评论(0编辑  收藏  举报

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绝大多数浏览器不兼容