css3 盒子模型 渐变

CSS3 私有前缀

• -webkit- chrome/safari等webkit内核浏览器
• -moz- firfox
• -o- opera
• -ms- IE

CSS3 盒子模型

• box-sizing 值 content-box（默认） / border-box　盒子大小仅由宽高决定

• resize 是否允许用户调节尺寸的大小

    必须设置overflow：hidden； 才有效
        box-sizing: border-box;
        width:300px;
        height:200px;
        padding:20px;
        border:2px solid #ccc;
        overflow:hidden;
        resize:horizontal;

  • 值 none / horizonta（改变宽度） / vertical（改变高度） / both（都改）
• outline 给元素周围绘制一条轮廓线
  • outline:width style color
• outline-width外廓线的宽度
  • length 不允许负值
  • medium 默认宽度
  • thin 比默认宽度细的轮廓
  • thick 比默认宽度粗的轮廓
• outline-color
• outline-style 值 同border-style solid / dotted / dashed ...
• outline-offset 外廓线的偏移量
• display: 值 新增了很多值
  • list-item 指定对象为列表项目
  • table 指定对下岗作为块元素级的表格，类似于html中的table标签
  • table-row 指定对象作为表格行 类似tr
  • table-cell 指定对象作为表格的单元格 类似td
  • 详情见css3手册

CSS3 长度单位

绝对单位

• em
• mm
• pt
• p
• pc
• q

相对单位

• px
• em
• ex 默认字体大小一半
• rem 相对于根元素字体大小 的倍数
• vw 相对于视口的宽度
• vh 相对于视口的高度
• vmax
• vmin

CSS3 颜色

设置半透明

• opacity 0~1之间的小数，不透明度，值越大，越不透明

            滤镜： opacity:.5;
            filter:alpha(opacity=50);
            /*背景透明 字体不透明*/
    .box02{
        /*父元素相对定位*/
        position:relative;
        filter:alpha(opacity=50);
        background-color: rgba(0,0,0,.5);
  
    }
    .box02 span{
        position:absolute;
        width:100%;
        left:0;
        top:0;
    }

颜色值

• hex 16进制
• colorname
• rgb
• rgba

• hsl (色调、饱和度、亮度)

    色调:0或360：红色、60：黄色、120：绿色、180：青色、240：蓝色
     饱和度取值为 0%~100% 饱和度越高颜色越艳
     亮度取值：0%~100%，100%最亮显示为白色

• hsla 在hsl上增加了透明度（0-1） 0完全透明

    透明也可以用opacity属性设 字和背景整体透明
    而alpha通道可以单独针对元素的背景色和文字颜色等来指定透明度

• transparent 透明

CSS3 渐变

线性渐变

• linear-gradient(方向, 色标1 色标1位置, 色标2, 色标2位置)

     也可以省略色标1和2的位置：颜色起始位置用百分比或长度单位
     `linear-gradient(to right, red 10px, purple 100px)`
    linear-gradient(180deg,red,purple)

• 方向： to left /to top /to right/to bottom / angle (0-360deg)

径向渐变

• radial-gradient(形状 半径 at 圆心, 色标 色标位置, 色标, 色标位置)
• 形状： ellipse(椭圆) / circle
• 半径： length， 百分比，closest-corner/closest-side/farthest-side/farthest-corner

• 位置 left/center/right top/center/bottom, 像素

    七彩同心圆：
    width:200px;
    height: 200px;
    border-radius: 100px;
    background:radial-gradient(red,orange,yellow,green,cyan,blue,purple);
  
    灰色球：
        width:200px;
        height: 200px;
        border-radius: 100px;
        background:radial-gradient(at 30% 30%,#fff,#333);
        background:radial-gradient(at 30% 30%,#fff,#333);
  
        笔记本（重复渐变）：
        margin:0px;
        background:repeating-linear-gradient(180deg,#fff 0px,#fff 29px,#999 30px);

转载于:https://www.cnblogs.com/pangwl/p/7295546.html