当前位置：首页 > news >正文

CSS相关

news 来源：原创 2024/5/9 11:44:27

【今日文章】：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元素会“固定”在离它【最近】的一个拥有“滚动机制”的祖先上。

针对像素点的操作

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

<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: hiddenoverflow: scrolloverflow: 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>