一、文字选中效果
::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;
}
效果展示