7.25圆角 阴影 渐变色 鼠标

今天和大家分享圆角 阴影 渐变色 鼠标的一些知识点

一、圆角

border-radius 圆角，让矩形盒模型拥有圆弧边缘；

取值通常使用百分比值 或 像素值 ；

值最多可为4个：

四个值： 左上 右上 右下 左下

三个值：左上 右上左下 右下

两个值：左上右下 右上左下

一个值：四个角同一值

圆角可以分解为更细的分解属性，比如左上角：border-top-left-radius

二·、阴影

box-shadow盒子阴影，让盒子四周产生阴影；

div{
    box-shadow:10px 5px 10px 5px red outset;
    /*
        第一个值：水平偏移（必需）
        第二个值：垂直偏移（必需）
        第三个值：模糊距离（可选，默认0）   从扩散边缘开始，向外逐渐模糊的距离
        第四个值：扩散距离（可选，默认0）   规则从何处开始模糊，默认0也就是盒子边，大于0则会看到阴影明显漏出，允许负值
        第五个值：隐藏颜色（可选，默认黑色）
        第六个值：阴影扩散方向（可选，默认ouset向外扩展，可以改为inset向内扩展）
    */
}

三、透明

opacity属性规定元素的透明度，取值 0（完全透明） ~ 1（完全不透明）；

在IE8及以下使用filter:alpha(opacity=值); 值可以为 0（完全透明） ~ 100（完全不透明）；

四、渐变色

在CSS3的渐变色属性出来之前这一效果只能借助设计师的图片来进行装饰，这样会平白给页面增加了一些http请求次数并增大了页面体积，最终导致延长页面的加载时间。而渐变色属性的出现则很大程度上解决了该问题。

1、线性渐变

a、基础写法

/*百分比值也可以用确却的像素值代替*/
background: linear-gradient(red 0%, blue 100%);

b、方向控制

渐变方向默认从上往下（to bottom），我可以在写颜色值之前加上方向控制：

/*向下 默认*/
background: linear-gradient(to bottom, #fb3664 0%, #4af5db 100%);
/*
向上 to top
向右 to right
向左 to left
向右上角 to right top
向右下角 to right bottom
向左下角 to left bottom
向左上角 to left top
*/

还可以使用角度值来指定方向（默认向下相当于180deg）：

backgorund: linear-gradient(45deg, #fb3664 0%, #4af5db 100%);

c、多颜色写法

渐变允许多种颜色过渡

background: linear-gradient(#fb3664 0%, #ff6600 30%, #4af5db 100%);

d、特殊简写

不写百分比位置值时，默认会平均分配：

background: linear-gradient(#fb3664, #ff6600, #4af5db);
/*等价于*/
background: linear-gradient(#fb3664 0%, #ff6600 50%, #4af5db 100%);

2、径向渐变

background:radial-gradient(rgb(182, 68, 167) 0%,rgb(61, 139, 230) 100%)

3、渐变色重复

repeating-linear-greadient 和 repeating-radial-gradient 可以让设置的背景色重复。

background: repeating-linear-gradient(45deg,red 0px,red 20px,blue 20px,blue 40px);

注意：渐变色本质上相当于背景图片，所以所有给背景图片的设置都适用于渐变色，如大小、位置、基点、多背景等等。

五、鼠标样式

cursor属性规定鼠标移入元素时的样式，取值如下：

值	描述
url	需使用的自定义光标的 URL。注释：请在此列表的末端始终定义一种普通的光标，以防没有由 URL 定义的可用光标。
default	默认光标（通常是一个箭头）
auto	默认值。浏览器设置的光标。
crosshair	光标呈现为十字线。
pointer	光标呈现为指示链接的指针（一只手）
move	此光标指示某对象可被移动。
text	此光标指示文本。
wait	此光标指示程序正忙（通常是一只表或沙漏）。
help	此光标指示可用的帮助（通常是一个问号或一个气球）。
e-resize	此光标指示矩形框的边缘可被向右（东）移动。
n-resize	此光标指示矩形框的边缘可被向上（北）移动。
s-resize	此光标指示矩形框的边缘可被向下移动（南）。
w-resize	此光标指示矩形框的边缘可被向左移动（西）。
ne-resize	此光标指示矩形框的边缘可被向上及向右移动（北/东）。
nw-resize	此光标指示矩形框的边缘可被向上及向左移动（北/西）。
se-resize	此光标指示矩形框的边缘可被向下及向右移动（南/东）。
sw-resize	此光标指示矩形框的边缘可被向下及向左移动（南/西）。