【css】常用功能（总结向）_css常用功能总结-优快云博客

本文介绍了前端开发中的一些实用技巧，包括如何使用CSS定制select框样式，利用clip-path实现不规则剪裁效果，以及img标签的object-fit属性在图片适配上的应用。此外，还推荐了几个宝藏网站，如用于检查浏览器兼容性的caniuse.com，创建阴影样式的neumorphism.io，以及选取颜色的zhongguose.com。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

常用功能（总结向）

1.select框样式
2.不规则剪裁 clip-path
3.超好用的img标签 object-fit属性
4.宝藏网站分享

1.select框样式

在这里插入图片描述

  width: 90px;
  height: 48px;
  background: #5167F7;
  box-shadow: 0px 2px 4px 0px rgb(153 153 153 / 50%);   /*加阴影*/
  border-radius: 2px;   /*加圆角*/
  color: #FFFFFF;
  font-size: 16px;
  text-align-last: center;   /*文字居中*/

2.不规则剪裁 clip-path

在这里插入图片描述

div{    
    position: relative;
    width: 200px;
    height: 64px;
    background: #f49714;
    clip-path: polygon(85% 0%, 100% 50%, 85% 100%, 0% 100%, 0% 0%);
}

此外还可以剪裁圆椭圆等，具体还可以参考这篇文章 https://blog.youkuaiyun.com/weixin_44116302/article/details/98882841

3.超好用的img标签 object-fit属性

css属性 object-fit: fill / contain / cover / none / scale-down;

fill 默认值。内容拉伸填满整个content box,不保证保持原有的比例。
contain 保持原有尺寸比例。长度和高度中短的那条边跟容器大小一致，长的那条等比缩放，可能会有留白。
cover 保持原有尺寸比例。宽度和高度中长的那条边跟容器大小一致，短的那条等比缩放。可能会有部分区域不可见。按比例填充满。
none 保持原有尺寸比例。同时保持替换内容原始尺寸大小。
scale-down 保持原有尺寸比例如果容器尺寸大于图片内容尺寸，保持图片的原有尺寸，不会放大失真;容器尺寸小于图片内容尺寸，用法跟contain—样。none 和 contain 的结合体更自由。