那些惊艳一时的 CSS 属性

news2024/11/25 2:27:09

1.position: sticky

在这里插入图片描述

不知道大家平时业务开发中有没有碰到像上图一样的吸顶的需求：标题在滚动的时候，会一直贴着最顶上。
这种场景实际上很多：比如表格的标题栏、网站的导航栏、手机通讯录的人名首字母标题等等。如果让大家自己动手做的话，是不是会用 js 结合 css 来实现呢？以前确实是这样的，直到后来 position 属性新增了一个属性值 sticky ，前端程序员才迎来了小春天。

// css 部分
.container {
    background-color: oldlace;
    height: 200px;
    width: 140px;
    overflow: auto;
  }
  .container div {
    height: 20px;
    background-color: aqua;
    border: 1px solid;
  }
  .container .header {
    position: sticky;
    top: 0;
    background-color: rgb(187, 153, 153);
}

// html 部分
<div class="container">
  <div class="header">Header</div>
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

就这么简单？对，就这么简单，但是小伙伴们使用的时候要注意兼容性

2. :empty 选择器

在这里插入图片描述
平时开发的时候数据都是通过请求接口获取的，也会存在接口没有数据的情况。这个时候正常的做法是给用户一个提示，让用户知道当前不是出 bug 了，而是确实没有数据。
一般的做法是我们人为的判断当前数据返回列表的长度是否为 0，如果为 0 则显示一个 “暂无数据” 给用户，反之则隐藏该提示。写过 Vue 的小伙伴是不是经常这么做：

<div>
    <template v-if="datas.length">
        <div v-for="data in datas"></div>
    </template>
    <template v-else>
        <div>暂无数据</div>
    </template>
</div>

但是有了 :empty 这个选择器后，你大可以把这个活交给 CSS 来干。

.container {
    height: 400px;
    width: 600px;
    background-color: antiquewhite;
    display: flex;
    justify-content: center;
    align-items: center;
}
.container:empty::after {
    content: "暂无数据";
}

通过 :empty 选中内容为空的容器，然后通过伪元素为空容器添加提示。是不是方便很多呢？

3. gap

小伙伴们日常开发中，都有用过 padding 和 margin 吧，margin 一般用做边距，让两个元素隔开一点距离，但是对于一些场景下，我们很难通过计算得到一个除的尽的值，比如 100px 我要让 3 个元素等分，且每个元素隔开 10px，这就很尴尬了。
没关系！我们可以用 gap 属性，gap 属性它适用于 Grid 布局、Flex 布局以及多列布局，并不一定只是 Grid 布局中可以使用。
比如我们要让每个元素之间隔开 20px， 那么使用 gap 我们可以这样：

display: flex | grid；
gap: 20px;

4. background-clip: text

这个属性可能小伙伴们用的不多，有什么用呢？简单来说就是可以做一个带背景的文字效果：
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

图 1 + 图 2 = 图 3。是不是很惊艳呢？大家平时 background-clip 是不是都用来做一些裁切效果？in知道它还有个属性值是 text 吗？background-clip: text 用来做带背景的文字效果，相信大家平时浏览一些网站的时候都会看到类似的实现，实际上通过 CSS 我们也能做到这种效果，可不要傻傻的以为都是用制图工具做的。

<p>Lorem ......</p>

p {
  color: transparent;
  background: url(https://media.giphy.com/media/Ju7l5y9osyymQ/giphy.gif) center/cover;
  background-clip: text;
}

5. user-select

很多人不知道这个属性是什么意思。大家看看下图：
在这里插入图片描述
网页和 APP 有个不同点是，网页上的字是可以通过光标选中的，而 APP 的不行。
有的小伙伴可能会疑惑：那我网页上也用不着这个属性啊？
非也非也，我们知道现在很多新的技术产生，可以在 APP 上嵌套 webview 或者是网页，比如 Electron 做的 桌面端应用 ，大家没见过哪个桌面端应用是可以光标选中的吧？
而 user-select 属性可以 禁用光标选中 ，让网页看着和移动端一样。

6. :invalid 伪类

:invalid 表示任意内容未通过验证的 input 或其他 form 元素。什么意思呢？举个例子。
这是一个表单。

<form>
  <label for="url_input">Enter a URL:</label>
  <input type="url" id="url_input" />
  <br />
  <br />
  <label for="email_input">Enter an email address:</label>
  <input type="email" id="email_input" required/>
</form>

我们的需求是让 input 当值有效时，元素颜色为绿色，无效时为红色。

input:invalid {
  background-color: #ffdddd;
}

form:invalid {
  border: 5px solid #ffdddd;
}

input:valid {
  background-color: #ddffdd;
}

form:valid {
  border: 5px solid #ddffdd;
}

input:required {
  border-color: #800000;
  border-width: 3px;
}

input:required:invalid {
  border-color: #C00000;
}

有了 :invalid 属性后，我们就可以不用 JS 也能实现校验提示的效果了。

7. :focus-within 伪类

:focus-within 表示一个元素获得焦点，或该元素的后代元素获得焦点，就会匹配上。啥意思呢？
话不多说，先看图：
在这里插入图片描述

// CSS
form {
    border: 1px solid;
    width: 400px;
    height: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
}
form:focus-within {
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.3);
    background-color: beige;
}

// HTML
<form>
  <input type="text" id="ipt" placeholder="请输入..." />
</form>

8. mix-blend-mode:difference

mix-blend-mode: difference，意为差值模式
该混合模式会查看每个通道中的颜色信息，比较底色和绘图色，用较亮的像素点的像素值减去较暗的像素点的像素值。

与白色混合将使底色反相；与黑色混合则不产生变化。
通俗一点就是上方图层的亮区将下方图层的颜色进行反相，暗区则将颜色正常显示出来，效果与原图像是完全相反的颜色。

例子1
在这里插入图片描述

//css
.mode {
    display: flex;
    justify-content: center;
    align-items: center;
    mix-blend-mode:difference;
}
  .dark {
    position: relative;
    left: 6px;
    height: 24px;
    width: 24px;
    background-color: grey;
    border-radius: 50%;
}
.light {
    mix-blend-mode:difference;
    position: relative;
    left: -6px;
    height: 16px;
    width: 16px;
    border-radius: 50%;
    border: 4px solid grey;
}
//html
<div class="mode">
	<div class="dark"></div>
	<div class="light"></div>
</div>

例子2
在这里插入图片描述

<div class="main"></div>

.main{
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, #000 0, #000 50%, #fff 50%);
    position: relative;
    
    &::before{
        content:'LOADING';
        position: absolute;
        font-size: 50px;
        width: 100%;
        height: 100%;
        top: 40%;
        left: 20%;
        color: #fff;
        mix-blend-mode: difference;
        animation: move 3s infinite linear alternate;
    }
} 
@keyframes move {
    0% {
        transform: translateX(20%);
    }
    100% {
        transform: translateX(-20%);
    }

9.counter

css也可以像js进行计算，当我们需要设置序号或者想知道某种情况出现的次数时，我们可以用一下属性

//counter-increment: record; 		/* 为计数器每次自增 1（默认） */
//counter-increment: record 2; 	/* 为计数器每次自增 2 */
//html
<body>
	<h3>lalala</h3>
  	<h3>lalala</h3>
  	<h3>lalala</h3>
</body>

//css
body{
	counter-reset: first;	/* 创建一个计数器first*/
}
h3:before {
  	content: counter(first)": " ;
}
h3 {
  	counter-increment: first 2;		/* 为计数器first每次增加2 */
}
//会得到结果
//2：lala
//4：lala
//6：lala

10.clip-path

该属性用于截取元素的部分用于显示

polygon

  • 值为多个坐标点组成，坐标第一个值是x方向，第二个值是y方向。
  • 左上角为原点，右下角是(100%,100%)的点。
//css
body {
  background-color: #000;
}
 
.fa {
  border: 1px solid #fff;
  color: yellowgreen;
  padding: 10px;
  margin: 10px;
}
 
.fa>div {
  width: 110px;
  height: 110px;
  background-color: yellowgreen;
  margin: 20px auto;
}
 
.polygon1 {
  clip-path: polygon(50% 0px, 100% 100%, 0px 100%)
}
 
.polygon2 {
  clip-path: polygon(0px 50%, 50% 0, 100% 50%, 50% 100%)
}
 
.polygon3 {
  clip-path: polygon(0% 60%, 20% 0%, 60% 0%, 40% 60%)
}

//html
<div class="fa">
  <p>polygon</p>
  <p>值为多个坐标点组成，坐标第一个值是x方向，第二个值是y方向。</p>
  <p>左上角为原点，右下角是(100%,100%)的点。</p>
  <div class="polygon1"></div>
  <div class="polygon2"></div>
  <div class="polygon3"></div>
</div>

在这里插入图片描述
circle

  • 值为一个坐标点和半径组成。
  • 左上角为原点，右下角是(100%,100%)的点。
  • 定义半径的时候可以用at关键字来定义坐标。
//css
body {
  background-color: #000;
}
 
.fa {
  border: 1px solid #fff;
  color: yellowgreen;
  padding: 10px;
  margin: 10px;
}
 
.fa>div {
  width: 110px;
  height: 110px;
  background-color: yellowgreen;
  margin: 20px auto;
}
 
.circle1 {
  clip-path: circle(50% at 50% 50%)
}
 
.circle2 {
  clip-path: circle(70% at 50% 50%)
}
 
.circle3 {
  clip-path: circle(30% at 10% 10%)
}

//html
<div class="fa">
  <p>circle</p>
  <p>值为一个坐标点和半径组成。</p>
  <p>左上角为原点，右下角是(100%,100%)的点。</p>
  <p>定义半径的时候可以用at关键字来定义坐标。</p>
  <div class="circle1"></div>
  <div class="circle2"></div>
  <div class="circle3"></div>
</div>

在这里插入图片描述
ellipse

  • 值为椭圆的x轴半径，y轴半径，定位椭圆的坐标三部分组成。
  • 左上角为原点，右下角是(100%,100%)的点。
  • at关键字将半径和坐标分开。
//css
body {
  background-color: #000;
}
 
.fa {
  border: 1px solid #fff;
  color: yellowgreen;
  padding: 10px;
  margin: 10px;
}
 
.fa>div {
  width: 110px;
  height: 110px;
  background-color: yellowgreen;
  margin: 20px auto;
}
 
.ellipse1 {
  clip-path: ellipse(30% 20% at 50% 50%)
}
 
.ellipse2 {
  clip-path: ellipse(20% 30% at 50% 50%)
}
 
.ellipse3 {
  clip-path: ellipse(60% 10% at 10% 10%)
}
//html
<div class="fa">
  <p>ellipse</p>
  <p>值为椭圆的x轴半径，y轴半径，定位椭圆的坐标三部分组成。</p>
  <p>左上角为原点，右下角是(100%,100%)的点。</p>
  <p>at关键字将半径和坐标分开</p>
  <div class="ellipse1"></div>
  <div class="ellipse2"></div>
  <div class="ellipse3"></div>
</div>

在这里插入图片描述
inset

  • 值为(上 右 下 左 round 左上角radius 右上角radius 右下角radius 左下角radius)
  • round前面的数值，表示的是距离，如果第一个值为25%，则表示图像在上面从25%开始绘制。
//css
body {
  background-color: #000;
}
 
.fa {
  border: 1px solid #fff;
  color: yellowgreen;
  padding: 10px;
  margin: 10px;
}
 
.fa>div {
  width: 110px;
  height: 110px;
  background-color: yellowgreen;
  margin: 20px auto;
}
 
.inset1 {
  clip-path: inset(25% 0% 25% 0% round 0% 25% 0% 25%)
}
 
.inset2 {
  clip-path: inset(0% 25% 25% 0% round 25% 25% 25% 0%)
}
 
.inset3 {
  clip-path: inset(25% 25% 0% 0% round 0% 25% 0% 25%)
}
//html
<div class="fa">
  <p>inset</p>
  <p>值为(上 右 下 左 round 左上角radius 右上角radius 右下角radius 左下角radius)</p>
  <p>round前面的数值，表示的是距离，如果第一个值为25%，则表示图像在上面从25%开始绘制</p>
  <div class="inset1"></div>
  <div class="inset2"></div>
  <div class="inset3"></div>
</div>

在这里插入图片描述
clip-path生成器：http://tools.jb51.net/code/css3path

后续会补充mask （遮罩）

引用于：
https://juejin.cn/post/7155780555554947102
https://www.jb51.net/css/641182.html

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/48709.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

flink学习

flink学习

Flink学习之路&#xff08;一&#xff09;Flink简介 - 走看看 Flink(一)-基本概念 - 知乎 Flink架构&#xff1a; Flink整个系统包含三个部分&#xff1a; 1、Client&#xff1a; 给用户提供向Flink系统提交用户任务&#xff08;流式作业&#xff09;的能力。用户提交一个F…
阅读更多...
大型商场借力泛微，实现内外协同招商，合同、铺位、费用统一管理

大型商场借力泛微，实现内外协同招商，合同、铺位、费用统一管理

对即将开业或是面临调整改造的购物中心来说&#xff0c;用什么样的方式才能快速地达成招商目的&#xff0c;实现资产价值的保值和增值&#xff0c;成为商业操盘手们共同面临的难题…… 行业需求 • 建立充足的品牌资源储备&#xff0c;拓宽招商渠道和线索&#xff0c;提高成交…
阅读更多...
ElasticSearch-全文检索和分析引擎学习Day01

ElasticSearch-全文检索和分析引擎学习Day01

前言 学习谷粒商城基础片完结后便开启了高级部分的学习&#xff0c;高级部分的第一章节 Elasticsearch 搜索和分析引擎。文档地址&#xff1a;elasticsearch中文文档地址 一、Elasticsearch 简介 1.1 Elasticsearch 是什么&#xff1f; Elasticsearch 是一个分布式的免费开…
阅读更多...
入门力扣自学笔记208 C++ （题目编号：895）

入门力扣自学笔记208 C++ （题目编号：895）

895. 最大频率栈​​​​​​ 题目&#xff1a; 设计一个类似堆栈的数据结构&#xff0c;将元素推入堆栈&#xff0c;并从堆栈中弹出出现频率最高的元素。 实现 FreqStack 类: FreqStack() 构造一个空的堆栈。 void push(int val) 将一个整数 val 压入栈顶。 int pop() 删除…
阅读更多...
Leetcode 85.最大矩形（困难）

Leetcode 85.最大矩形（困难）

一、题目 1、题目描述 给定一个仅包含 0 和 1 、大小为 rows x cols 的二维二进制矩阵&#xff0c;找出只包含 1 的最大矩形&#xff0c;并返回其面积。 示例1&#xff1a; 输入&#xff1a;matrix [["1","0","1","0","0&qu…
阅读更多...
基于微信小程序奶茶店在线点单管理系统ssm框架-计算机毕业设计

基于微信小程序奶茶店在线点单管理系统ssm框架-计算机毕业设计

面对目前奶茶店林立的现状&#xff0c;大城市奶茶店多为连锁奶茶店他们都有统一的管理和相应的系统。但是个别小县城和小城以及城区也有不少的奶茶店多为自营&#xff0c;这就必须店长自己管理和采购原料。大型连锁的奶茶店管理系统就不适用于分散的小型奶茶店。小型奶茶店的管…
阅读更多...
剑指 Offer 10- II. 青蛙跳台阶问题

剑指 Offer 10- II. 青蛙跳台阶问题

一、题目描述 一只青蛙一次可以跳上1级台阶&#xff0c;也可以跳上2级台阶。求该青蛙跳上一个 n 级的台阶总共有多少种跳法。 答案需要取模 1e97&#xff08;1000000007&#xff09;&#xff0c;如计算初始结果为&#xff1a;1000000008&#xff0c;请返回 1。 二、示例 示…
阅读更多...
TaWRKY19/61/82激活糖转运蛋白TaSTP3从而增强小麦条锈病敏感性

TaWRKY19/61/82激活糖转运蛋白TaSTP3从而增强小麦条锈病敏感性

文章信息 题目&#xff1a;Sugar transporter TaSTP3 activation by TaWRKY19/61/82 enhances stripe rust susceptibility in wheat 刊名&#xff1a;New Phytologist 作者&#xff1a;Baoyu Huai&#xff0c;Zhensheng Kang,Jie Liu et al. 单位&#xff1a;Northwest A&…
阅读更多...
【C++】string使用模拟实现

【C++】string使用模拟实现

文章目录前言为什么学习string类&#xff1f;1. string函数常用接口介绍1.1 string容器基本概念1.2 string构造函数1.3 string访问和修改1.4 string插入和删除1.5 string赋值操作1.5 string字符串拼接1.7 string查找和替换1.8 string子串1.9 string类对象的容量操作2. string类…
阅读更多...
dockerfile编写

dockerfile编写

dockerfile编写 dcoker 的一个操作和交互的关系流程: dockerfile 编写规则 习惯使用大写非注释行第一行必须是FROM文件名必须是dockerfile指定一个专门的工作目录所有引入的映射文件必须在这个工作空间目录下工作空间不支持隐藏文件(.dockeringore)作用是用于存放不需要打包…
阅读更多...
2022最新iOS最新打包发布流程

2022最新iOS最新打包发布流程

关于如何发布iOS应用到App Stroe&#xff0c;苹果开发者中心已经给出了很详细的说明。和普通的iOS应用一样&#xff0c;使用React Native开发的iOS应用也需要使用普通的iOS应用的发布流程&#xff0c;总的来说&#xff0c;主要涉及以下几步&#xff1a; 加入苹果开发者计划&am…
阅读更多...
【Android进阶之旅】内存泄漏的危害有哪些？（案例分析）

【Android进阶之旅】内存泄漏的危害有哪些？（案例分析）

随着计算机应用需求的日益增加&#xff0c;应用程序的设计与开发也相应的日趋复杂&#xff1b; 开发人员在程序实现的过程中处理的变量也大量增加&#xff0c;如何有效进行内存分配和释放&#xff0c;防止内存泄漏的问题变得越来越突出 例如&#xff1a; 服务器应用软件&#x…
阅读更多...
connection is being used##server is in use and cannot be deleted

connection is being used##server is in use and cannot be deleted

mysql数据库被黑客挟持&#xff0c;删除我的数据库&#xff0c;让我用比特币来换&#xff0c;吓死我了&#xff0c;还好是测试库&#xff0c;删了就删了&#xff0c;数据库备份还得做好&#xff0c;密码不能设置太简单了。 下面是黑客留言&#xff1a; "以下数据库已被删…
阅读更多...
64-65 - C++中的异常处理

64-65 - C++中的异常处理

---- 整理自狄泰软件唐佐林老师课程 1. C异常处理 1.1 try catch内容一 C内置了异常处理的语法元素 try catchtry语句用于处理正常代码逻辑catch语句用于处理异常情况 try语句中的异常由对应的catch语句处理 1.2 C通过throw语句抛出异常信息 1.3 C异常处理分析 throw抛出的…
阅读更多...
【SSM注解汇总】

【SSM注解汇总】

SSM注解汇总 文章目录SSM注解汇总MyBatis注解1. param("param1","param2",...)2. MapKey("id")Spring注解1. IOC Component Service Controller Repository2. 基于注解方式实现属性注入1&#xff09;Autowired2&#xff09;Qualifier3&#xff0…
阅读更多...
Allegro铜皮动静态切换操作指导

Allegro铜皮动静态切换操作指导

Allegro铜皮动静态切换操作指导 Allegro支持铜皮的动静态相互切换，并且还可以批量操作，具体操作如下 动态切换成静态 以下面图片为例，这是个动态铜皮dynamic属性 点击选择铜皮命令 选中铜皮 右击选择change shape type 会出现一个弹窗警告，直接点击是 铜皮被change成…
阅读更多...
海外仓物流有哪些优缺点

海外仓物流有哪些优缺点

海外仓的优点&#xff1a;较低的物流成本、更有效率的送货时效、优质的仓储管理经验、订单处理省时省力、库存管理及盘点清晰明确、远程操作省时省力、自动快捷的退换货处理流程等。海外仓的缺点&#xff1a;存储压力大&#xff0c;库存成本高&#xff0c;资金运转不便等。海外…
阅读更多...
微软威胁建模工具 STRIDE

微软威胁建模工具 STRIDE

威胁建模要回答的四个问题 what are we woking on what can go wrong what are we going to do about this did we do a good enough job 说到threat modeling 不得不提的就是微软的STRIDE 微软也提供了工具来做这个工作 Microsoft Threat Modeling Tool overview - Azur…
阅读更多...
tictoc例子理解10-13

tictoc例子理解10-13

tictoc10-13tictoc 10 几个模块连接&#xff0c;发送消息直到模块3收到消息tictoc 11 新增信道定义tictoc 12 双向连接信息简化定义tictoc 10 几个模块连接&#xff0c;发送消息直到模块3收到消息 让我们用几个(n)’ tic’模块让它更有趣&#xff0c;并将每个模块连接到其他模…
阅读更多...
基于Android的学生管理系统App设计与实现（Eclipse开发）

基于Android的学生管理系统App设计与实现（Eclipse开发）

目 录 摘 要 I Abstract II 1 绪论 1 1.1 选题背景及意义 1 1.2 研究现状 1 1.2.1 教育系统发展现状 1 1.2.2 手机的应用市场发展现状 1 1.2.3 Android平台介绍 3 1.2.4 Android管理学生信息的意义 5 1.3.3 开发的环境及开发工具介绍 6 1.3 研究主要内容 6 2 相关技术介绍 7 2.…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023