html_css_圆角、影印、透明、渐变、鼠标_ZHOU125disorder_

圆角

border-radius

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

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

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

一个值：四个角同一值

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

border-radius: 50%;			//border-radius的值可以为百分比_也可以为四个值;		
border-radius: 50px; 		//border-radius的值可以为长度单位	_也可以为四个值;

border-image(边框图片)

语法:

border-image: source slice width outset repeat|initial|inherit;

border-image: url(border.jpg) 40 round;

值	描述
border-image-source	用于指定要用于绘制边框的图像的位置 路径
border-image-slice	图像边界向内偏移
border-image-width	图像边界的宽度
border-image-outset	用于指定在边框外部绘制 border-image-area 的量
border-image-repeat	用于设置图像边界是否应重复（repeat）、拉伸（stretch）或铺满（round）。

border-shadow (盒子阴影)

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

opacity(透明)

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

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

渐变

1. 线性渐变

	默认写法:		渐变方向默认从上往下（to bottom），我可以在写颜色值之前加上方向控制;
	background: linear-gradient(#000 0%,#000 50%,#fff 50%,#fff 100%); 

改变方向

向上 to top
向右 to right
向左 to left
向右上角 to right top
向右下角 to right bottom
向左下角 to left bottom
向左上角 to left top
还可以使用角度值来指定方向;
角度增大顺时针转
角度变小逆时针转
不写百分比位置值时，默认会平均分配

2. 径向渐变

默认写法:
background:radial-gradient(50% 50% at 50% 25%,#fff 0%, #fff 12.5%,#000 12.5%,#000 50%, transparent 50%);
background:radial-gradient(shape size at position,color......);`shape 形状  circle(圆形) 或 ellipse(椭圆形) 默认值为 ellipse 椭圆`

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

鼠标样式

值	描述
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	此光标指示矩形框的边缘可被向下及向左移动（南/西）。