美文网首页
多列布局、box-shadow、back-ground、tran

多列布局、box-shadow、back-ground、tran

作者: JokerFace | 来源:发表于2016-12-01 21:36 被阅读0次

多列布局

列数、列宽

columns:3 5em;      执行最少列数(复合)
column-count:3;     列数
column-width:5em;   列宽

设置列之间缝隙

column-gap:3em;设置列之间的缝隙存在兼容问题
-webkit-column-gap: 3em;
-moz-column-gap: 3em;
column-gap: 3em;     通常这样写

缝隙分割线样式

column-rule:1px solid blue;    (复合形式)
column-rule-width:1xp;          宽
column-rule-style:dashed;       样式
column-rule-color:red;          颜色

box-shadow

    盒子阴影
    box-shadow:水平位移 垂直位移 模糊程度 颜色;
    box-shadow:insert 5px 5px 5px red;              insert 可以设置内阴影
    box-shadow:-5px -5px 5px red,5px 5px 5px blue;  可以写多个值  中间用逗号分隔

back-ground

背景图片 background-img

背景图无法撑起元素的高度
    background-size:contain;图片完全放入到元素中,但是图片的长宽比可能会产生留白风险
    background-size:cover;  图片完全填充到元素中,可能有部分图超出元素看不到。
    background-size:300px 300px;可以单独设置宽高,可能会使图片比例失调

设置背景图原点位置与裁剪

background-origin:设置背景图原点的位置
                    border-box  从border左上角开始
                    padding-box 从padding左上角开始
                    content-box 从content左上角开始
background-clip:对背景图进行裁剪,超出的部分不要
                    border-box  从border左上角开始
                    padding-box 从padding左上角开始
                    content-box 从content左上角开始                      

背景渐变

background:linear-gradient(red,blue)   线性渐变
           linear-gradient(to right,red,blue) to right 表示方向   也可改为90deg
           linear-gradient(90deg,red 20%,blue 20%)   线性分层渐变

background:radial-gradient(red,blue)   径向渐变
background:radial-gradient(at 0 0,red,blue) at 可以设置圆心位置  如果直接写两个数字px,则代表横轴渐变和纵轴渐变的大小
如果容器不是正方形  则以椭圆的方式进行渐变   可以设置circle属性进行圆形渐变
background:radial-gradient(circle,red,blue)

transform

transform:代表标签的形变
          translate  位移   translateX translateY translateZ
          rotate     旋转 通常围绕Z轴   deg
          scale      缩放 默认值是1
          skew       倾斜 deg
示例:
                transform: translate(100px, 100px);
                transform: rotate(180deg);
                transform: scale(0.5);

                transform: skewY(45deg);

transform-origin   形变参考点  主要针对旋转使用

animation

animation-name:动画名称
animation-duration:动画时间
animation-iteration-count:动画次数     infinite(无限)
animation-delay:动画延迟

animation-direction:是否返程     alternate-reverse;
animation-timing-function:linear   速度曲线
animation-play-state:paused/running 播放与暂停
animation-fill-mode:forwards动画结束时应用最后一帧的属性 
                    backwards延迟时应用第一帧属性

标签(空格分隔): 未分类


在此输入正文

相关文章

  • 多列布局、box-shadow、back-ground、tran

    多列布局 列数、列宽 设置列之间缝隙 缝隙分割线样式 box-shadow back-ground 背景图片 ba...

  • 页面架构

    布局解决方案 水平居中布局 垂直居中布局 水平垂直都居中的布局 多列布局 多列等分布局 多列等高布局 在多列布局的...

  • CSS3开发常用核心技能

    基础网页布局 布局分类 一列布局 两列布局 三列布局 多列布局 一列布局: 二列布局: 三列布局: ⚠️ midd...

  • css常见布局(二)

    采用flex实现两列,三列等多列的布局 一、两列布局 二、三列布局

  • 多列布局

    column-width: 列的宽度 column-count: 列的数量 column-gap: 列与列之间...

  • 多列布局

    column-width: 列的宽度 column-count: 列的数量 column-gap : 列与列的间...

  • 多列布局

  • 多列布局

    简介CSS多列布局继承自块级布局模式,允许简单地定义多列文本。当阅读文字的时候,从一行末尾移动到下一行开始处,容易...

  • 多列布局

    多列布局在一个网页设计中非常常见,不仅可以用来做外部容器的布局,在一些局部也经常出现多列布局,比如下面圈出来的都是...

  • 多列布局

    定宽+自适应 float + margin float + overflow table flex 定宽+定宽+自...

网友评论

      本文标题:多列布局、box-shadow、back-ground、tran

      本文链接:https://www.haomeiwen.com/subject/fklfmttx.html