CSS相关

【今日文章】：CSS相关

图片裁剪
粘性布局
针对像素点的操作

图片裁剪

clip-path有四种裁剪方式：

1.矩形

2.圆形

3.椭圆

4.多边形

1.建议写百分比

2.用在线生成工具来裁剪

关于裁剪常用的应用场景：图片一开始展示的是裁剪后的结果。当鼠标hover以后，展示全部。

 <img class="img" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2Fd66671b7-b6c6-4e7f-ba50-f95b0b12a9fd%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1702107078&t=dc9c5ceef37a4fc69c5807b1fca8f575">img>




	.img{
		width:600px;
		height:600px;
		margin-left:30%;
		/*
            clip-path有四种裁剪方式：
                1.矩形
				2.圆形
				3.椭圆
				4.多边形
				
			1.建议写百分比
			2.用在线生成工具来裁剪
		*/
		clip-path:circle(50% at 50% 50%);
		transition:0.5s;
	}
	
	.img:hover{
	    clip-path:circle(100% at 50% 50%) 
	}
	
    
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

粘性布局

一句话：一个sticky元素会“固定”在离它【最近】的一个拥有“滚动机制”的祖先上。

针对像素点的操作

阴影效果
模糊程度
黑白效果

<body>
    <img class="img" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2Fd66671b7-b6c6-4e7f-ba50-f95b0b12a9fd%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1702107078&t=dc9c5ceef37a4fc69c5807b1fca8f575">img>
    
	
	<div style="overflow:auto">
		<div class="header"> header div>
		<div class="title"> title div>
		<div class="content"> content div>
	div>
	

	<div style="overflow:visible">
		<div class="header"> header div>
		<div class="title"> title div>
		<div class="content"> content div>
	div>
	
	
	<div>
 	   <img class="filterImg" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2Fd66671b7-b6c6-4e7f-ba50-f95b0b12a9fd%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1702107078&t=dc9c5ceef37a4fc69c5807b1fca8f575">img>
	   <img class="filterImg2" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2Fd66671b7-b6c6-4e7f-ba50-f95b0b12a9fd%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1702107078&t=dc9c5ceef37a4fc69c5807b1fca8f575">img>
	   <img class="filterImg3" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2Fd66671b7-b6c6-4e7f-ba50-f95b0b12a9fd%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1702107078&t=dc9c5ceef37a4fc69c5807b1fca8f575">img>
	 div>



	
	
body>
<style>
	.img{
		width:600px;
		height:600px;
		margin-left:30%;
		/*
            clip-path有四种裁剪方式：
                1.矩形
				2.圆形
				3.椭圆
				4.多边形
				
			1.建议写百分比
			2.用在线生成工具来裁剪
		*/
		clip-path:circle(50% at 50% 50%);
		transition:0.5s;
	}
	
	.img:hover{
	    clip-path:circle(100% at 50% 50%) 
	}
	
	
	/* 粘性布局：			
            一句话:一个sticky元素会“固定”在离它【最近】的一个拥有“滚动机制”的祖先上			
			
			有些情况下,粘性布局会失效:
				overflow: hidden
				overflow: scroll
				overflow: auto
	*/
	.header{
		height:200px;width:100%;background:green
	}
	.title{
		height:100px;width:100%;background:red;position:sticky;top:0;
	}
	.content{
		height:700px;width:100%;background:blue
	}
	
	
	
	/* 针对像素点的操作 */ 
	.filterImg{
		width:200px;
		height:200px;
		/* 阴影效果 */ 
		filter:drop-shadow(10px 10px 10px red)
	}
	
	.filterImg2{
		width:200px;
		height:200px;
		/* 模糊程度 */ 
		filter:blur(5px);
	}
	
	.filterImg3{
		width:200px;
		height:200px;
		/* 黑白效果 */ 
		filter:grayscale(1)
	}
		
style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96

相关阅读:
0068【Edabit ★☆☆☆☆☆】I‘d Like a New Shade of Blue, Please
树上倍增法
 一个ubuntu系统搭建redis集群
 好评较高的图片转文字软件哪个好？这款软件十分好用
 Android 系统高度修改定制开机动画显示时间
 Spring Data Redis + RabbitMQ - 基于 string 实现缓存、计数功能（同步数据）
[附源码]SSM计算机毕业设计医院药房管理系统JAVA
hot100-数组中的第k个最大元素
 三层交换机实现不同VLAN间通讯
 拼多多“超级农货节”收官阳光玫瑰、琯溪蜜柚上榜“超级水果”
原文地址：https://blog.csdn.net/sugerfle/article/details/134392269