zoukankan      html  css  js  c++  java
  • HTML——CSS3学习

    CSS3边框

     三个标签:border-radius,box-shadow,border-image;border-radius可以设置圆角,可分别为左上,右上,左下,右下单独设置圆角。box-shadow设置阴影,水平阴影,垂直,模糊度,颜色,使用特例:

    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);

    设置卡片效果

    。border-image设置图片边框,边框大小以及图片填充方式 repeat,round,stretch。

    背景

    background-image 设置背景图片,可以设置多张,第一张在最上层显示

    background-size 背景图片大小

    background-orgin  content-box,padding-box,border-box,背景图片放置的位置

    background-clip 背景的绘制区域

    颜色渐变属性

    linear-gradient  线性渐变,可指定方向,默认从上到下,需设置初始颜色与结束颜色,使用rgb可以设置透明度

    radial-gradient  径向渐变,由圆心向外渐变,默认为椭圆ellipse

    文本效果

    text-shadow 文字阴影

    text-overflow  文字超出部分处理 ,clip直接裁剪,ellipsis 超出部分加上省略号

    换行: word-wrap:normal 等同于 word-break:keep-all,支持换行,但是不支持长单词拆分换行,word-wrap:break-word,保留noraml遇到断字点如标点,空格等情况下换行的规则,并会对超出长度的长单词或url等截断换行,而word-break:break-all 则不采用断字点换行规则,只根据长途,达到对应长度自动换行

    字体:@font-face  font-family:自定义名字  src:字体引用文件  font-weight:字体粗细

    2D/3D转换

    transform(2D): 平移:translate(x,y) 从当前位置在x轴 y轴平移大小

          旋转:rotate(deg)角度旋转

          放缩:scale(宽倍数,高倍数)宽高放缩一定倍数

          倾斜:skew(20deg,30deg)x倾斜20deg,y轴倾斜30deg

          matrix(),六个参数,包括平移,旋转,放缩,倾斜四种效果

    transform(3D): tranlate3d(x,y,z),rotate3d(x,y,z,angle) scale(x,y,z)3D转换,matrix()内使用16个值,4x4矩阵

    transform-orgin:可修改被转换的元素位置

    动画:

    transition:设置过度效果,属性名➕时间 + 时间曲线+开始时间(后两个默认ease,0,为可选)

        transition-property  duration  timing-function delay

    @keyframes 创建关键动画

    需要设置初始 与 结束 的style from to 或者 0% 100%,使用百分可以设置多重效果

      animation-name  duration timing-function delay  iteration-count 播放次数 direction 下一次是否逆向  play-state 是否运行或者暂停动画

    column:

    column-count  分割列数 colum-gap 列之间的间隙  column-rule-style:solid 列边框样式 colum-rule-width 列边框宽度 colum-rule-color 颜色 column-rule三项简写

    box-sizing:border-box 设定后,设置的宽度或者高度,是包括pading 和border ,不仅仅指盒子content

    resizing:both 用户可调整宽高  horizontal 可调整宽度  vertical 可调整高度

    弹性盒子

    display:flex/inline-flex

    flex-direction 设置主轴方向 row 横向  row-reverse 横 反向  column 竖直方向 cloumn-reverse反向

    justify-content(主轴): flex-start  flex-end  center space-between两端对齐  space-around 分散对齐

    align-items(次轴): flex-start  flex-end  center baseline与基线对齐 stretch是否拉伸

    flex-wrap:wrap 换行

    align-content:定义行的对齐方式,与单个item无关 flex-start  flex-end  center space-between两端对齐  space-around 分散对齐

    order:可设置负数,根据内容,对item进行排序,最小排最前面

    auto:设置剩余空间位置  margin:auto 剩余空间放在item四周,item剧中,margin-right:auto  剩余空间放在item右边,item靠左显示

    flex:自动计算item所占用空间

    align-self:设置单个item的对齐方式

       

  • 相关阅读:
    node.js如何让前端请求时能跨域
    手把手教你使用webpack搭建vue框架
    手把手教你使用koa2
    react性能优化
    axios post 踩坑之 post传参
    小程序自定义左上角返回按钮跳转到指定界面
    webpack入门教程
    编写可维护的js代码
    js的严格模式
    vue短信验证性能优化写入localstorage中
  • 原文地址:https://www.cnblogs.com/zhulilove/p/8747197.html
Copyright © 2011-2022 走看看