CSS 笔记——阴影、圆角、旋转、光标

╰+攻爆jí腚メ 2022-01-12 12:03 437阅读 0赞

## 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 光标 ###

#### 基本语法 ####

#### 语法取值 ####

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属性定义了鼠标指针放在一个元素边界范围内时所用的光标形状。

转载于:https://www.cnblogs.com/xzh0717/p/10658629.html