CSS常用点

网页三兄弟

  • 渐变

    1
    2
    background: #000000;
    background: linear-gradient(to bottom,  #000000 0%,#ffffff 100%);

  • 阴影

    1
    2
    3
    4
    5
    //内阴影效
    box-shadow:5px 5px 5px #999 inset;

    //外部阴影
    box-shadow:5px 5px 5px #ddd;

  • 鼠标指针

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    cursor: pointer;

    // 自定义鼠标样式，使用URL，并提供一个关键字值作为备用
    cursor: url("hyper.cur"), auto;

    // URL和xy的坐标偏移值，最后提供一个关键字值作为备用
    cursor:  url(cursor1.png) 4 12, auto;
    cursor:  url(cursor2.png) 2 2, pointer;

    // 全局属性 
    cursor: inherit;
    cursor: initial;
    cursor: unset;
    指针明细
    类型 CSS值 描述
    General auto 浏览器根据当前内容决定指针样式
    例如当是内容是文字时使用text样式
    default 默认指针，通常是箭头。
    none 无指针被渲染
    链接及状态 context-menu 指针下有可用内容目录。
    help 指示帮助
    pointer 悬浮于连接上时，通常为手
    progress 程序后台繁忙，用户仍可交互 (与wait相反).
    wait 程序繁忙，用户不可交互 (与progress相反).图标一般为沙漏或者表。
    选择 cell 指示单元格可被选中
    crosshair 交叉指针，通常指示位图中的框选
    text 指示文字可被选中
    vertical-text 指示垂直文字可被选中
    拖拽 alias 复制或快捷方式将要被创建
    copy 指示可复制
    move 被悬浮的物体可被移动
    no-drop 当前位置不能扔下
    Windows或Mac OS X中 "no-drop 与not-allowed相同".
    not-allowed 不能执行
    grab

    可抓取

    译者注:grab和grabbing在比较后期才被支持，见浏览器兼容表
    grabbing 抓取中
    重设大小及滚动 all-scroll 元素可任意方向滚动 （平移）.
    Windows中, "all-scroll 与 move相同".
    col-resize 元素可被重设宽度。通常被渲染为中间有一条竖线分割的左右两个箭头
    row-resize

    元素可被重设高度。通常被渲染为中间有一条横线分割的上下两个箭头
    n-resize 某条边将被移动。例如元素盒的东南角被移动时使用se-resize
    e-resize
    s-resize
    w-resize
    ne-resize
    nw-resize
    se-resize
    sw-resize
    ew-resize 指示双向重新设置大小
    ns-resize
    nesw-resize
    nwse-resize
    缩放 zoom-in

    指示可被放大或缩小
    zoom-out
    [点击查看浏览器兼容性](https://developer.mozilla.org/zh-CN/docs/Web/CSS/cursor#%E6%B5%8F%E8%A7%88%E5%99%A8%E5%85%BC%E5%AE%B9%E6%80%A7)

  • 文字超出点点点

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    // 一行显示，超出显示点点点
    p {
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
    }

    // 多行显示超出点点点
    .box {
        width: 400px; display: 
        -webkit-box;-webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }