zoukankan      html  css  js  c++  java
  • 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>
            只能有一个表头和表尾
    ​️我还很喜欢你、就像sin²x+cos²x始终如一
  • 相关阅读:
    Oracle 安装报错 [INS-06101] IP address of localhost could not be determined 解决方法输入日志标题
    Linux下安装oracle数据库提示DISPLAY not set. Please set the DISPLAY and try again。
    redhat 关机注销命令详解
    VirtualBox的四种网络连接方式
    修改RedHat的系统显示时间
    insufficient memory to configure kdump(没有足够的内存)解决方法(待验证、待解决)
    xen坑随笔 heartbeat dpkg垃圾数据库清除
    tomcat 监控脚本
    负载均衡随笔
    GIT命令介绍
  • 原文地址:https://www.cnblogs.com/tis100204/p/10280836.html
Copyright © 2011-2022 走看看