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;
	}

效果展示

相关推荐
季禮祥3 分钟前
都2025了,你确定你完全掌握Typescript了吗
前端·typescript
OpenTiny社区3 分钟前
直播预告|新手从搭建到二开TinyEngine低代码引擎
前端·低代码·开源
全栈派森3 分钟前
React Hooks 你知道哪些 ?
前端·react.js
aklry4 分钟前
elpis之前端工程化
前端·webpack
柳儿4 分钟前
typescript版本与@types/lodash版本不兼容问题解决思路
前端
7675604794 分钟前
createGlobalState源码解析及使用指南
前端·源码
三木前端6 分钟前
像设计师一样处理图像,只需几行 JavaScript 代码!
前端·javascript·webgl
酷酷的名字9 分钟前
初识Docker,入门篇及实战操作
前端·后端
谎言西西里10 分钟前
🤔 还在为跨域问题头疼?JSONP 是你的答案!
前端
AndyGoWei13 分钟前
什么时候fixed定位不会相对于视口,看这篇文章就够了
前端·javascript