其他样式

Posted 2021-01-05 ningjie

color:blue //前景色

opacity:0.1//  前景 背景都可以用, 0~1 ,透明度

box-shadow  (text-shadow)

  box-shadow :

    

			CSS 版本
box-shadow	hoffset	阴影的水平偏移量,是一个长度 值,正值表示阴影向右偏移,负值 表示阴影向左偏移。	3
	voffset	阴影的垂直偏移量,是一个长度 值,正值代表阴影位于元素盒子的 下方,负值代表阴影位于元素盒子 上方。	3
	blur	(可选)指定模糊值,是一个长度 值,值越大盒子的边界越模糊。默 认值为 0,边界清晰	3
	spread	(可选)指定阴影延伸半径,是一 个长度值,正值代表阴影向盒子各 个方向延伸扩大,负值代表阴影沿 相反方向缩小	3
	color	(可选)设置阴影的颜色,如果省 略,浏览器会自行选择一个颜色	3
	inset	(可选)将外部阴影设置为内部阴 影。	3

 

2.outline

 

CSS3 还提供了轮廓样式,它和边框一样,只不过它可以在边框的外围再加一层。样式 表如下:

属性	值	说明	CSS 版本
outline-color	颜色	外围轮廓的颜色	3
outline-offset	长度	轮廓距离元素边框边缘的偏移量	3
outline-style	样式	轮廓样式,和 border-style 一致	3
ontline-witdh	长度	轮廓宽度	3
outline	简写	<颜色> <样式> <宽度>	3

div { width: 200px;

       height: 200px;
       border: 10px solid silver;
       outline: 10px double red;

}

  解释:在边框的外围再增加一圈轮廓。

三.光标样式

我们不但可以指定页面上的元素样式,就连光标的样式也可以指定。样式表如下:

属性	值	说明	CSS 版本
cursor	光标样式	auto,default,none,context-men u,help,pointer,progress,wait, cell,crosshair,text,vertical- text,alias,copy,move,no-drop, not-allowed,e-resize,n-resize ,ne-resize,nw-resize,s-resize ,se-resize,sw-resize,w-resize ,ew-resize,ns-resize,nesw-res ize,nwse-resize,col-resize,ro w-resize,all-scroll	1

div {
    cursor: move;

}

解释:设置当前元素的光标为移动光标。