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始终如一
  • 相关阅读:
    离线安装MySQL5.7
    ELK应用之一:ELK平台搭建部署
    RabbitMQ的安装部署
    Docker应用五:使用Dockerfile部署MongoDB
    Zabbix应用八:Zabbix监控MongoDB
    Zabbix应用七:Zabbix发送短信报警
    Zabbix应用六:Zabbix监控Redis
    Zabbix应用五:Zabbix监控多Tomcat
    python序列(列表和元祖)
    wps实现自动编码
  • 原文地址:https://www.cnblogs.com/tis100204/p/10280836.html
Copyright © 2011-2022 走看看