CSS文字选中效果、图片裁剪

一、文字选中效果

  • ::selection是一个伪元素,允许自定义用户选中文本时的外观.仅字体颜色及背景色
  • ::-moz-selection确保样式在Firefox中正常

html

xml 复制代码
<div class="box">
    为自己内心而活,别被世俗枷锁所束缚
    <br />人生短短数十载,无愧于心
</div>

css

css 复制代码
.box::selection {
  color: aqua;
  background-color: pink;
}
.box::-moz-selection {
  color: aqua;
  background-color: pink;
}

效果展示

二、图片裁剪

  • inset(xx% xx% xx% xx%) 的值表示要显示的图片原始区域中的上、右、下、左位置
  • object-fit 属性设置为 cover 可以确保结果图片不会变形

html

xml 复制代码
//window.location.replace("https://juejin.cn/user/84036866547575/columns")
	<div class="box">
		<!-- 原图 -->
		<img  src="../../src/assets/歌.jpg" alt="" />
		<!-- 裁剪后 -->
		<img class="img" src="../../src/assets/歌.jpg" alt="" />
	</div>

css

css 复制代码
	/* inset()值表示要显示的图片原始区域中的上、右、下、左位置 */
	.box .img{
		aspect-ratio: 1;
		width: 300px;
		object-view-box: inset(15% 10% 35% 10%);
		object-fit: cover;
	}

效果展示

相关推荐
灵感__idea8 分钟前
JavaScript高级程序设计(第5版):好的编程就是掌控感
前端·javascript·程序员
烛阴1 小时前
Mix
前端·webgl
代码续发1 小时前
前端组件梳理
前端
试图让你心动2 小时前
原生input添加删除图标类似vue里面移入显示删除[jquery]
前端·vue.js·jquery
陈不知代码3 小时前
uniapp创建vue3+ts+pinia+sass项目
前端·uni-app·sass
小王码农记3 小时前
sass中@mixin与 @include
前端·sass
陈琦鹏3 小时前
轻松管理 WebSocket 连接!easy-websocket-client
前端·vue.js·websocket
hui函数3 小时前
掌握JavaScript函数封装与作用域
前端·javascript
行板Andante3 小时前
前端设计中如何在鼠标悬浮时同步修改块内样式
前端
Carlos_sam4 小时前
Opnelayers:ol-wind之Field 类属性和方法详解
前端·javascript