当前位置:首页 > 前端 > 正文

css3新增属性

文字阴影 text-shadow:h-shadow/v-shadow   h-shadow    水平阴影,允许负值,正数时阴影在右,负数时阴影在左 v-shadow    垂直阴影,允许负值,正数时阴影在底部,负数时阴影在上面             水平和垂直阴影必须要写   blur        模糊距离,只能是正数 color       阴影颜色   盒子阴影 box-shadow     默认时外阴影(六个属性值,前四个是value,color,inset)   1)阴影离开盒子时的横向距离 2)阴影离开盒子时的纵向距离 3)阴影的模糊半径 4)阴影的延伸半径 5)阴影的颜色 6)inset是否使用内阴影 inset和color可以在最前面,但不可以在数值中间   自己决定自动换行的处理方法 work-break   normal        默认换行规则,中午到边界换行,英文从整个单词换行 keep-all      不允许断字(指中文),对火狐和苹果浏览器不起作用 break-all     允许在单词内换行,可以强行截断英文单词,可以让标点位于首位   是否允许浏览器在单词内断句 word-wrap   normal        默认只允许在断字点换行 break-word    在长单词处或地址栏内,将内容在边界换行,但不截断英文单词   背景裁剪 background-clip   border-box    默认值,边框区域 padding-box   紧挨着边框 centert-box   内容区   text          背景图填充文本效果 text-fill-color:transparent    背景图填充文本效果时透明   背景图起点 background-orgin     先给背景图定位(background-position),在定起点   border-box      边框区域 padding-box   默认值,紧挨着边框 centert-box     内容区   背景图大小 background-size       1、直接写像素(先水平,后垂直)     2、直接写100%     3、cover(图片放到足够大,会失真)     4、contain(按比例缩放)   圆角 正圆     border-radius         高是多少就给多少     1、一个数值,四个角都变     2、两个数值,左上和右下,右上和左下     3、三个数值,左上,右下和左上,右下     4、四个数值,顺时针上右下左   椭圆      1、一组数值,四个角变化相同          2、两组数值,斜对角相同变化          3、三组数值,左上,右下和左上,右下          4、四组数值,顺时针上右下左      边框图 border-image     1、source:url路径     2、slice:value 数值,不带单位     3、width:value 边框宽度     4、repeat:repeat(平铺)  round(环绕) stretch(拉伸)   字体图标 iconfont   颜色特性 hsl/hsla     h 色调   0-360 可以是小数     s 饱和度 %    大于等于100%时为白色,0%为黑色     l 亮度   %    大于100%不报错     a 透明度  0-1   表单 1、文字段集     <fieldset></fieldset> 2、字段集标题     <legend></legend>     且是fieldset中唯一的 3、提示信息         <label for="绑定控件id名"></label>         点字会触发对应框 4、上传文件框         <input type="file" multiple="multiple"/>         mulitiple    实现多选         默认的单选、多选、下拉以及上传的样式都改不了     1、单选多选用图片或者背景图,功能用js或cs隐藏     2、上传文件框,用div写样式,功能用js     3、下拉用ul li做菜单   表格CSS属性(给table加) 1、单元格间距     border-spacing 2、合并单元格间距     border-collapse 3、无内容时单元格设置     empty-cells:hide(隐藏)    show(显示) 4、自适应     table-layout:auto(宽自适应)                   fixed(固定宽,高自适应)   默认带有边框的     fieldset     input         textares     select     hr   表格html属性 th:列,默认文字加粗,且水平居中 1、表格标题     <caption></caption> 2、标题位置         caption-side:top/right/left/bottom         left和right    火狐识别        top和bottom    IE7以上识别 3、组分隔线         rules="groups/rows/cols/all/none" 4、列分组         <colgroups></colgroups>         <col/>没有分隔线 5、行分组         表头    <thead></thead>         表体    <tbody></tbody>         表尾    <tfoot></tfoot>         只能有一个表头和表尾