CSS(2) 阴影和渐变

最新推荐文章于 2024-07-16 16:58:16 发布

棋宣

最新推荐文章于 2024-07-16 16:58:16 发布

阅读量2.7k

点赞数 1

文章标签： css html sass

本文链接：https://blog.csdn.net/flower521528/article/details/123566637

版权

一、阴影

1.文字阴影：text-shadow

text-shadow：值1 值2 值3 颜色。

实例：

<style>
		.box{
		font-size:50px;
		text-shadow:
		/* 第一个值为水平方向  
		第二个值为垂直方向  
		第三个值为模糊程度 加颜色*/
		12px 12px 5px #FF0000;
		}
		</style>
	</head>
	<body>
	
		<div class="box">托马斯家的</div>
		
	
	</body>

运行截图：

2.盒子阴影：box-shadow

box-shadow:值1 值2 值3 值4 颜色 inset（阴影向内扩展）

实例：

<style>
	.box{
		width:200px;
		height:200px;	
		box-shadow: 
				/* 第一个值为水平方向
					第二个值为垂直方向
					第三个值为模糊程度
					第四个值为扩展半径
					颜色
					inset:阴影向内扩展
				 */
		10px 10px 10px 10px  #FF0000 inset;
		transition: 0.5s;
	}

		</style>
	</head>
	<body>
		<div class="box">
			托马斯
		</div>
	</body>

运行截图：

3.圆角 border-radius

简写：

border-radius:值1 （直接定义四个角）

border-radius:值1 值2 （值1定义左上角和右下角，值2定义右上角和左下角）

border-radius:值1 值2 值3（值1定义左上角，值2定义右上角和左下角，值3定义右下角）

border-radius:值1 值2 值3 值4（值1定义左上角，值2定义右上角，值3定义右下角，值4定义左下角）

实例：

<style>
			.logo{
				width:200px;
				height:200px;
				background-color: cornflowerblue;
				/* 1.一个值代表4个角的弧度 */
				/* border-radius:10px; */
				/* 2.第一个值为左上角和右下角
					 第二个值我右上角和左下角
				 */
				/* border-radius:10px 30px; */
				/* 3.第一个值为左上角
					 第二个值为右上角和左下角
					 第三个值为右下角
				 */
				/* border-radius:10px 20px 50px; */
				/* 4.第一个值为左上角
					 第二个值我右上角
					 第三个值为右下角
					 第四个值为左下角
				 */
				border-radius:30px 10px 20px 50px;
			}
		</style>
	</head>
	<body>
		<div class="logo">
			
		</div>
	</body>

运行截图：

4.字体：下载各种字体进行使用

（1）.下载并定义字体

@font-family:"maofont"

src:url(./fonts/maofont.otf) 这个是引入下载的字体

（2）.使用字体

font-family:"maofont"

实例：

<style>
		/* 1.定义字体 */
			@font-face{
				font-family:"makefont";
				src:url(./fonts/makefont.otf);
			}
			@font-face{
				font-family:"maofont";
				src:url(./fonts/maozedong.ttf);
			}
			/* 2.使用字体 */
			.box{
				font-family: "makefont";
				font-size:50px;
			}
			.logo{
				font-family: "maofont";
				font-size:50px;
			}
		</style>
	</head>
	<body>
		<div class="box">
			托马斯家的<br>
			焖焖<br>
			张建军<br>
			张淑芬<br>
		</div>
		
		<div class="logo">
			托马斯家的<br>
			焖焖<br>
			张建军<br>
			张淑芬<br>
		</div>
	</body>

运行截图：

5. 渐变

（1）.线性渐变：

background-imagee:liner-gradient(渐变方向，颜色位置，颜色2 位置)

渐变方向：45deg（角度），to left（从右向左），top（从下到上），

repeating：加上这个，可以实现线性渐变的重复

实例：

<style>
			.box{
				width:400px;
				height:200px;
				/* 渐变色设置
					第一个值为角度  第一个颜色为起始颜色，第二个颜色为过渡到的颜色
					角度也可以用方向单词
				 */
				/* repeating重复线性渐变 */
				background-image: repeating-linear-gradient(to left top,red ,pink 50px);
			}
			
		</style>
	</head>
	<body>
		<div class="box">
			
		</div>
	</body>

运行截图：

（2）.径向渐变

background-image:linear-grasient(shape size at position,颜色位置，颜色2 位置)

shape：

        ellipse：默认椭圆

        corcle：圆形

size：渐变大小

        fathest-conner：半径长度为圆心到离圆心最远的角

        fathest-side：半径长度为圆心到离圆心最近的边

        closest-side;半径长度为圆心到离圆心最近的边

        consest-conner:半径长度为圆心到离圆心最远的角

position：圆心位置

实例：

<style>
			.box{
				width:400px;
				height:400px;
				
				background-image: radial-gradient(circle farthest-side,#fff ,#ff2);
				border-radius: 50%;
			}
		</style>
	</head>
	<body>
		<div class="box">
			
		</div>
	</body>

运行截图：

棋宣

关注

1
点赞
踩
7

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS(2) 阴影和渐变

一、阴影1.文字阴影：text-shadow text-shadow：值1 值2 值3 颜色。实例：<style> .box{ font-size:50px; text-shadow: /* 第一个值为水平方向第二个值为垂直方向第三个值为模糊程度加颜色*/ 12px 12px 5px #FF0000; } </style> </head> <body> ...
复制链接

扫一扫