zoukankan      html  css  js  c++  java
  • CSS 笔记——阴影、圆角、旋转、光标

    7. 阴影、圆角、旋转、光标

    (1)box-shadow 阴影

    基本语法

    text-shadow: h-shadow v-shadow blur color;
    box-shadow: h-shadow v-shadow blur spread color inset;
    

    语法取值

    h-shadow : 必需。水平阴影的位置。允许负值。
    v-shadow : 必需。垂直阴影的位置。允许负值。
    blur : 可选。模糊的距离。
    spread : 可选。阴影的大小。
    color : 可选。阴影的颜色。
    inset : 可选。从外层的阴影(开始时)改变阴影内侧阴影。
    

    (2)border-radius 圆角边框

    基本语法

    border-radius : border-top-left-radius || border-top-right-radius || border-bottom-right-radius || border-bottom-left-radius;
    

    语法取值

    border-radius 属性是一个最多可指定四个 border -*- radius 属性的复合属性。
    

    使用说明

    每个半径的四个值的顺序是:左上角,右上角,右下角,左下角。如果省略左下角,右上角是相同的。如果省略右下角,左上角是相同的。如果省略右上角,左上角是相同的。

    (3)border-top-left-radius

    基本语法

    border-top-left-radius : length;
    

    语法取值

    length  :  百分比数字 | 由浮点数字和单位标识符组成的长度值
    

    使用说明

    定义左上角的圆角边框。

    (4)border-top-right-radius

    基本语法

    border-top-right-radius : length;
    

    语法取值

    length  :  百分比数字 | 由浮点数字和单位标识符组成的长度值
    

    使用说明

    定义右上角的圆角边框。

    (5)border-bottom-left-radius

    基本语法

    border-bottom-left-radius : length;
    

    语法取值

    length  :  百分比数字 | 由浮点数字和单位标识符组成的长度值
    

    使用说明

    定义左下角的圆角边框。

    (6)border-bottom-right-radius

    基本语法

    border-bottom-right-radius : length;
    

    语法取值

    length  :  百分比数字 | 由浮点数字和单位标识符组成的长度值
    

    使用说明

    定义右下角的圆角边框。

    (7)transform 旋转

    基本语法

    transform : none|transform-functions;
    

    语法取值

    none :定义不进行转换。
    matrix(n,n,n,n,n,n) :定义 2D 转换,使用六个值的矩阵。
    matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) :定义 3D 转换,使用 16 个值的 4x4 矩阵。
    translate(x,y) : 定义 2D 转换。
    translate3d(x,y,z) :定义 3D 转换。
    translateX(x) :定义转换,只是用 X 轴的值。
    translateY(y) :定义转换,只是用 Y 轴的值。
    translateZ(z) :定义 3D 转换,只是用 Z 轴的值。
    scale(x[,y]?) :定义 2D 缩放转换。
    scale3d(x,y,z) :定义 3D 缩放转换。
    scaleX(x) :通过设置 X 轴的值来定义缩放转换。
    scaleY(y) :通过设置 Y 轴的值来定义缩放转换。
    scaleZ(z) :通过设置 Z 轴的值来定义 3D 缩放转换。
    rotate(angle) :定义 2D 旋转,在参数中规定角度。
    rotate3d(x,y,z,angle) :定义 3D 旋转。
    rotateX(angle) :定义沿着 X 轴的 3D 旋转。
    rotateY(angle) :定义沿着 Y 轴的 3D 旋转。
    rotateZ(angle) :定义沿着 Z 轴的 3D 旋转。
    skew(x-angle,y-angle) :定义沿着 X 和 Y 轴的 2D 倾斜转换。
    skewX(angle) :定义沿着 X 轴的 2D 倾斜转换。
    skewY(angle) :定义沿着 Y 轴的 2D 倾斜转换。
    perspective(n) :为 3D 转换元素定义透视视图。
    

    使用说明

    Transform属性应用于元素的2D或3D转换。这个属性允许你将元素旋转,缩放,移动,倾斜等。

    (8)cursor 光标

    基本语法

    cursor : default | auto | crosshair | pointer | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize | text | wait | help;
    

    语法取值

    default	默认光标(通常是一个箭头)
    auto	默认。浏览器设置的光标。
    crosshair	光标呈现为十字线。
    pointer	光标呈现为指示链接的指针(一只手)
    move	此光标指示某对象可被移动。
    e-resize	此光标指示矩形框的边缘可被向右(东)移动。
    ne-resize	此光标指示矩形框的边缘可被向上及向右移动(北/东)。
    nw-resize	此光标指示矩形框的边缘可被向上及向左移动(北/西)。
    n-resize	此光标指示矩形框的边缘可被向上(北)移动。
    se-resize	此光标指示矩形框的边缘可被向下及向右移动(南/东)。
    sw-resize	此光标指示矩形框的边缘可被向下及向左移动(南/西)。
    s-resize	此光标指示矩形框的边缘可被向下移动(北/西)。
    w-resize	此光标指示矩形框的边缘可被向左移动(西)。
    text	此光标指示文本。
    wait	此光标指示程序正忙(通常是一只表或沙漏)。
    help	此光标指示可用的帮助(通常是一个问号或一个气球)。
    

    使用说明

    cursor属性定义了鼠标指针放在一个元素边界范围内时所用的光标形状。

  • 相关阅读:
    [论文泛读]Web服务综述相关论文1(1篇)
    [论文泛读]QoS of Web service 综述相关论文1(1篇)
    用jquery判断一个对象是否存在
    android 程序开发 R.### cannot be resolved
    发票管理及打印系统的部分代码
    项目下R.java竟然没有R.id这个类!
    C#调用ISAG网关下发彩信长征路上的一个小脚印
    机打发票打印管理
    Android获取手机和系统版本等信息的代码
    Android开发环境搭建全程演示(jdk+eclipse+android sdk)
  • 原文地址:https://www.cnblogs.com/xzh0717/p/10658629.html
Copyright © 2011-2022 走看看