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