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%) 
	}
	
    

粘性布局

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

针对像素点的操作

  1. 阴影效果
  2. 模糊程度
  3. 黑白效果
<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>

你可能感兴趣的:(css,前端,html,css3,html5)