CSS阴影和渐变

最新推荐文章于 2024-04-15 04:51:23 发布

我就是菜_ICai

最新推荐文章于 2024-04-15 04:51:23 发布

阅读量1.6k

点赞数

分类专栏： HTML5

本文链接：https://blog.csdn.net/weixin_43797050/article/details/105165057

版权

HTML5 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

1. 盒阴影
（1）box-shadow是给对象实现图层阴影效果，基本语法如下：
对象选择器｛box-shadow：投影方式 || x轴偏移量 || y轴偏移量 || 阴影模糊半径 || 阴影扩展半径 || 阴影颜色｝
（2）box-shadow属性参数说明

参数类型	取值说明
投影方式	此参数是一个可选值，如果不设值，其默认的投影方式是外阴影，设置阴影类型为“inset”时，起投影就是内阴影。
x轴偏移量	即阴影的水平偏移量，其值可以是正负值，如果值为正值，则阴影在对象的右边；反之，如果值为负值，则阴影在对象的左边。
y轴偏移量	即阴影的垂直偏移量，其值也可以是正负值，如果值为正值，则阴影在对象的底部；反之，如果值为负值，则阴影在对象的顶部。
阴影模糊半径	此参数为可选，但其值只能为正值，如果值为0,则表示阴影不具有模糊效果，其值越大阴影的边缘就越模糊。
阴影扩展半径	此参数为可选，其值可以是正负值，如果值为正值，则整个阴影都延展扩大;反之,如果值为负值, 则阴影缩小。
阴影颜色	此参数为可选，如果不设定任何颜色，则浏览器会取默认色，但各浏览器的默认颜色不一样，特别是在webkit内核下的safari和chrome浏览器将无色，也就是透明，建议不要省略此参数。

（3）使用示例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>对象阴影</title>
	<style type="text/css">
		.box{
			box-shadow:   7px 4px 10px #000 inset;
			width: 300px;
			height: 80px;
		}
		.box1 img{
			box-shadow: #000 7px 4px 10px;
		}
	</style>
</head>
<body>
	<h3>盒子对象阴影测试</h3>
	<div class="box">DIV盒子内阴影</div>
	<h3>图片对象阴影测试</h3>
	<div class="box1">
		<img src="images/1.png">
	</div>
</body>
</html>

（4）运行结果
在这里插入图片描述
2.CSS3渐变
渐变是两种或多种颜色之间的平滑过渡。CSS3渐变属性主要包括线性渐变、径向渐变和重复渐变。
（1）线性渐变
在CSS3中的线性渐变通过“background-image:linear-gradient(参数值）;”来设置，其基本语法格式如下：
background-image:linear-gradient([<angle>] | <side-or-corner>, | color stop, color stop[, color stop] *);其中，[ ]中的参数为可选值。

a、linear-gradient属性的参数说明

参数类型	取值说明
`<angle>`	表示渐变的角度，角度数的取值范围是0- 860deg。这个角度是以圆心为起点的角度，并以这个角度为发散方向进行渐变。
`<side-or-corner>`	通过关键词来确定渐变的方向。默认值为top（从上向下）取值范围是ltf.right,top,bottom,center,top right,top ltft,bottom left,bottom right,eft center,right center]。注意: IE10只能取[left,top]，Chrome 则没有[center,left center,right center]
`<side-or-corner>`	用于设置颜色边界, color 为边界的颜色，stop 为该边界的位置，stop 的值为像素数值或百stop之间的区域为颜色过渡区stop之间的区域为颜色过渡区。

b、使用示例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>CSS3渐变</title>
	<style type="text/css">
		/*CSS3 线性渐变*/
		.rainbow-linear-gradient{
			width: 460px;
			height: 160px;
			background-image: -webkit-linear-gradient(left,#E50743 0%, #F9870F 15%, #E8ED30 30%, #3FA62E 45%, #3BB4D7 60%, #2F4D9E 75%, #71378A 80%);
		}
    </style>
</head>
<body>
	<!-- CSS3 线性渐变 -->
	<h1>线性渐变</h1>
	<div class="rainbow-linear-gradient"></div>
</body>
</html>

c、运行结果
在这里插入图片描述
（2）径向渐变
CSS3中的径向渐变通过“background-image: radial-gradient (参数值) ;”来设置，其基本语法格式如下：background- image: radial-gradient(圆心坐标，渐变形状渐变大小，color stop,color stop[,color stop] *) ;

a、radial -gradient的参数取值说明

参数类型	取值说明
圆心坐标	用于设置放射圆形的坐标，可设置为形如10px 20px的x-offset y-offset，或使用预设值center (默认值)
渐变形状	circle：圆形；ellipse：椭圆形，默认值；
渐变大小	closest-side或containl：以距离圆心最近的边的距离作为渐变半径； closest-comer：以距离圆心最近的角的距离作为渐变半径；farthest-side ：以距离圆心最远的边的距离作为渐变半径；farthest-corner或cove：以距离圆心最远的角的距离作为渐变半径

b、使用示例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>CSS3渐变</title>
	<style type="text/css">
		/*CSS3 径向渐变*/
		.rainbow-radial-gradient{
			width:300px;
			height: 300px;
			background-image: -webkit-radial-gradient(100px, #ffe07b 15%,#ffb151 2%, #16104b 50%)
		}
	</style>
</head>
<body>
	<!-- CSS3 径向渐变 -->
	<h1>径向渐变</h1>
	<div class="rainbow-radial-gradient"></div>
</body>
</html>

c、运行结果
在这里插入图片描述

我就是菜_ICai

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
CSS阴影和渐变

1. 盒阴影（1）box-shadow是给对象实现图层阴影效果，基本语法如下：对象选择器｛box-shadow：投影方式 || x轴偏移量 || y轴偏移量 || 阴影模糊半径 || 阴影扩展半径 || 阴影颜色｝（2）box-shadow属性参数说明参数类型取值说明投影方式此参数是一个可选值，如果不设值，其默认的投影方式是外阴影，设置阴影类型为“inset”时，起投...
复制链接

扫一扫