记录几个很好用的css功能

最新推荐文章于 2024-04-13 15:44:30 发布

丑小鸭变黑天鹅

最新推荐文章于 2024-04-13 15:44:30 发布

阅读量111

点赞数

分类专栏： css日常总结文章标签： css3

本文链接：https://blog.csdn.net/qq_41880073/article/details/115281487

版权

css日常总结专栏收录该内容

25 篇文章 3 订阅

订阅专栏

记录几个很好用的css功能

一、过滤功能
二、writing mode
三、圆锥梯度函数
四、CSS calc ( ）函数
五、混合模式

一、过滤功能

filter CSS中的函数用于将图形效果应用于元素。你可以实现很多的效果，因为过滤功能有很多其他的功能。

filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();

注意：如需使用多个滤镜，请用空格分隔每个滤镜
在这里插入图片描述

下面通过实例看一下他们的效果

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.cat1 {
				filter: none;
			}
			.cat2 {
				filter: blur(5px);
			}
			.cat3 {
				filter: brightness(50%);
			}
			.cat4 {
				filter: brightness(150%);
			}
			.cat5 {
				filter: contrast(50%);
			}
			.cat6 {
				filter: contrast(150%);
			}
			.cat7 {
				filter: drop-shadow(0px 8px 5px red);
			}
			.cat8 {
				filter: grayscale(50%);
			}
			.cat9 {
				filter: grayscale(100%);
			}
			.cat10 {
				filter: hue-rotate(60deg);
			}
			.cat11 {
				filter: hue-rotate(260deg);
			}
			.cat12 {
				filter: invert(80%);
			}
			.cat13 {
				filter: invert(100%);
			}
			.cat14 {
				filter: opacity(50%);
			}
			.cat15 {
				filter: saturate(50%);
			}
			.cat16 {
				filter: sepia(100%);
			}
		</style>
	</head>
	<body>
		<div class="filter">
			<img src="images/cat.jpg" class="cat1">
			<img src="images/cat.jpg" class="cat2">
			<img src="images/cat.jpg" class="cat3">
			<img src="images/cat.jpg" class="cat4">
			<img src="images/cat.jpg" class="cat5">
			<img src="images/cat.jpg" class="cat6">
			<img src="images/cat.jpg" class="cat7">
			<img src="images/cat.jpg" class="cat8">
			<img src="images/cat.jpg" class="cat9">
			<img src="images/cat.jpg" class="cat10">
			<img src="images/cat.jpg" class="cat11">
			<img src="images/cat.jpg" class="cat12">
			<img src="images/cat.jpg" class="cat13">
			<img src="images/cat.jpg" class="cat14">
			<img src="images/cat.jpg" class="cat15">
			<img src="images/cat.jpg" class="cat16">
		</div>
	</body>
</html>

在这里插入图片描述

二、writing mode

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			h1{
			  writing-mode: vertical-lr;
			}
			h2{
			  writing-mode: horizontal-tb;
			}
		</style>
	</head>
	<body>
		<h1>哈哈哈</h1>
		<h2>哈哈哈</h2>
	</body>
</html>

在这里插入图片描述

三、圆锥梯度函数

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div{
			  width: 300px;
			  height: 300px;
			  border-radius: 50%;
			  background: conic-gradient(red 0% 20%, green 20% 60%, blue 60% 100%);
			}
		</style>
	</head>
	<body>
		<div></div>
	</body>
</html>

在这里插入图片描述

四、CSS calc ( ）函数

div { 
 width：calc（100％-300px）; 
}

在这里插入图片描述

五、混合模式

混合模式是已添加到CSS的惊人功能。CSS中有两个混合模式属性：

mix-blend-mode ：定义元素和元素之间的混合。

background-blend-mode ：定义元素的背景颜色和背景图像之间的混合。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.blend {		  
			  display: flex;
			  align-items: center;
			  justify-content: center;
			} 
			
			.blend img {
			  position: absolute;
			}
			
			.blend h1 { 
			  font-size: 150px;
			  mix-blend-mode: overlay;
			}
		</style>
	</head>
	<body>
		<div class="blend">
			<img src="images/screen2.jpg" >
			<h1>hello</h1>
		</div>
	</body>
</html>

在这里插入图片描述
本文内容借鉴下面链接
https://mp.weixin.qq.com/s/-KJ1dNti77DtVvCCgKOfIQ

丑小鸭变黑天鹅

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
记录几个很好用的css功能

记录几个很好用的css功能一、过滤功能二、writing mode三、圆锥梯度函数四、CSS calc ( ）函数五、混合模式一、过滤功能filter CSS中的函数用于将图形效果应用于元素。你可以实现很多的效果，因为过滤功能有很多其他的功能。filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate()
复制链接

扫一扫