css3渐变，css3阴影，火焰字

最新推荐文章于 2021-06-19 06:49:19 发布

qq_42589571

最新推荐文章于 2021-06-19 06:49:19 发布

阅读量199

点赞数

本文链接：https://blog.csdn.net/qq_42589571/article/details/104447216

版权

css3渐变

在两个或多个指定的颜色之间显示平稳的过渡。
两种类型的渐变：
线性渐变:方向向下/向上/向左/向右/对角方向

background-image:linear-gradient( red , yellow 50%, green 100%);
默认是
从上到下：to bottom
从下到上：to top
从左到右：to right
从右到左：to left
有角度：
background-image:linear-gradient( 20deg , red , blue);
注：角度是0deg在容器的最下面bottom位置。正数就是顺时针旋转。

在这里插入图片描述
径向渐变：由它们的中心定义
background-image: radial-gradient(red, yellow, green);

例：
布局：

<div id="box">
		</div>

css：

#box{
				width: 300px;
				height: 30px;
				border: 1px solid #000000;
				background-image:linear-gradient( to right top, orangered 25% , white 25%, white 50% , orangered 50% ,  orangered 75%, white 75%);
				background-size: 30px;
			}

运行结果：
在这里插入图片描述
在让进度条动起来：
css

css3阴影

1. box shadow：

向框添加一个或多个阴影
盒阴影：
box-shadow
x：水平阴影
y：垂直阴影
blur : 模糊值
spread : 范围
color：颜色（默认颜色为黑色）
inset : 内阴影 outset(默认值：外阴影 , 写上outset不会生效，不写就是外阴影)

box-shadow: 5px 5px 10px #ccc;

例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			   #box{ 
			   	margin: 50px;
			   	width: 100px;
			   	height: 150px;
			   	box-shadow: 5px 5px 10px #ccc;
    		}
		</style>
	</head>
	<body>
		<div id="box">
		</div>
	</body>
</html>

结果：
在这里插入图片描述
文本阴影：
text-shadow
x：水平阴影
y：垂直阴影
blur : 模糊值
color：颜色
默认阴影颜色和文字颜色相同

box-shadow: 5px 5px 10px #red;

多阴影：
阴影可设置多个

例：可以利用多阴影设置火焰字
布局部分：

<div id="box">
			火焰字qwq
		</div>

css部分：

#box{
				width: 200px;
				margin: 50px auto;
				font-size: 40px;
				text-shadow: 0 0 4px white,0 -5px 4px #ff3,3px -10px
				 5px #EE9900,-3px -15px 10px #DF5000,3px -25px 20px #BD2C00;
			}

最终效果：
在这里插入图片描述

qq_42589571

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
css3渐变，css3阴影，火焰字

css3渐变在两个或多个指定的颜色之间显示平稳的过渡。两种类型的渐变：线性渐变:方向向下/向上/向左/向右/对角方向background-image:linear-gradient( red , yellow 50%, green 100%);默认是从上到下：to bottom从下到上：to top从左到右：to right从右到左：to left有角度：backgroun...
复制链接

扫一扫