5个你可能不知道的很棒CSS功能

2024-01-16 07:38

本文主要是介绍5个你可能不知道的很棒CSS功能,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

英文 | https://javascript.plainenglish.io/the-6-powerful-javascript-object-methods-that-you-should-know-b2a659ddf3b5

翻译 | web前端开发

介绍

在过去的几年中,CSS有了很大的改进。总会有一些新功能出来,让你感到惊讶。你可以使用CSS的功能来创建很多令人惊奇的东西,只需要有一点创意即可。

在今天的文中,我们将为你提供一些你可能不知道,但是有用的CSS功能。

现在,让我们开始吧。

1、 CSS calc ( )函数

你可以采用CSS中的calc( ) 函数来计算CSS属性的大小值。它主要使用数学运算进行计算,例如的结果(+,-,*,/)。

这是一个示例:

div { width:calc(100%-300px); 
}

上面的示例创建了一个div,该div跨窗口延伸,并且div的两侧和窗口边缘之间的间距为300px。

输出结果如下:

你也可以通过Codepen查看线上的效果与完整源码:https://codepen.io/MehdiAoussiad/pen/RwGNqPe

2、圆锥梯度函数

conic-gradient CSS中的功能使你可以轻松创建美观的饼图。

这是一个示例:

div{width: 300px;height: 300px;border-radius: 50%;background: conic-gradient(red 0% 20%, blue 20% 60%, black 60% 100%);
}

如你所见,你只需要在函数内指定颜色的开始和结束百分比。

输出结果如下:

你也可以通过Codepen查看线上的效果与完整源码:https://codepen.io/MehdiAoussiad/pen/ExNOXjN

3、writing mode

该属性writing-mode将CSS中文本行的方向设置为垂直或水平。

代码示例如下:

h1{writing-mode: vertical-lr;
}
h2{writing-mode: horizontal-tb;
}

最终输出效果:

你也可以通过Codepen查看线上的效果与完整源码:https://codepen.io/MehdiAoussiad/pen/WNoYOEN

4、过滤功能

filter  CSS中的函数用于将图形效果应用于元素。你可以实现很多的效果,因为过滤功能有很多其他的功能,如:( blur,brightness,contrast,grayscale,hue-rotate,opacity,invert,sepia,)。saturatedrop-shadow

示例代码例子:

img{filter: hue-rotate(-40deg);
}
/* Or */
.img2{filter: contrast(170%) saturate(80%) blur(1px);
}

示例输出效果如下:

你也可以通过Codepen查看线上的效果与完整源码:https://codepen.io/MehdiAoussiad/pen/JjRoeEL

5、混合模式

混合模式是已添加到CSS的惊人功能。CSS中有两个混合模式属性:

mix-blend-mode :定义元素和元素之间的混合。

background-blend-mode :定义元素的背景颜色和背景图像之间的混合。

这是一个例子:

.blend h1 { font-size: 150px;mix-blend-mode: overlay;
}

示例输出效果如下:

你也可以通过Codepen查看线上的效果与完整源码:https://codepen.io/MehdiAoussiad/pen/OJbagdL

结论

CSS是一种很棒的样式表语言,你必须是开发人员才能知道。你可以使用它创建很多令人惊奇的东西。你只需要练习就可以做到。

感谢你阅读本文,希望对你有用。

本文完〜

学习更多技能

请点击下方web前端开发

这篇关于5个你可能不知道的很棒CSS功能的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!


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

相关文章

Java使用Mail构建邮件功能的完整指南

《Java使用Mail构建邮件功能的完整指南》JavaMailAPI是一个功能强大的工具,它可以帮助开发者轻松实现邮件的发送与接收功能,本文将介绍如何使用JavaMail发送和接收邮件,希望对大家有所... 目录1、简述2、主要特点3、发送样例3.1 发送纯文本邮件3.2 发送 html 邮件3.3 发送带

Java实现数据库图片上传功能详解

《Java实现数据库图片上传功能详解》这篇文章主要为大家详细介绍了如何使用Java实现数据库图片上传功能,包含从数据库拿图片传递前端渲染,感兴趣的小伙伴可以跟随小编一起学习一下... 目录1、前言2、数据库搭建&nbsChina编程p; 3、后端实现将图片存储进数据库4、后端实现从数据库取出图片给前端5、前端拿到

Nginx实现前端灰度发布

《Nginx实现前端灰度发布》灰度发布是一种重要的策略,它允许我们在不影响所有用户的情况下,逐步推出新功能或更新,通过灰度发布,我们可以测试新版本的稳定性和性能,下面就来介绍一下前端灰度发布的使用,感... 目录前言一、基于权重的流量分配二、基于 Cookie 的分流三、基于请求头的分流四、基于请求参数的分

基于Canvas的Html5多时区动态时钟实战代码

《基于Canvas的Html5多时区动态时钟实战代码》:本文主要介绍了如何使用Canvas在HTML5上实现一个多时区动态时钟的web展示,通过Canvas的API,可以绘制出6个不同城市的时钟,并且这些时钟可以动态转动,每个时钟上都会标注出对应的24小时制时间,详细内容请阅读本文,希望能对你有所帮助...

HTML5 data-*自定义数据属性的示例代码

《HTML5data-*自定义数据属性的示例代码》HTML5的自定义数据属性(data-*)提供了一种标准化的方法在HTML元素上存储额外信息,可以通过JavaScript访问、修改和在CSS中使用... 目录引言基本概念使用自定义数据属性1. 在 html 中定义2. 通过 JavaScript 访问3.

Python使用DeepSeek进行联网搜索功能详解

《Python使用DeepSeek进行联网搜索功能详解》Python作为一种非常流行的编程语言,结合DeepSeek这一高性能的深度学习工具包,可以方便地处理各种深度学习任务,本文将介绍一下如何使用P... 目录一、环境准备与依赖安装二、DeepSeek简介三、联网搜索与数据集准备四、实践示例:图像分类1.

如何关闭 Mac 触发角功能或设置修饰键? mac电脑防止误触设置技巧

《如何关闭Mac触发角功能或设置修饰键?mac电脑防止误触设置技巧》从Windows换到iOS大半年来,触发角是我觉得值得吹爆的MacBook效率神器,成为一大说服理由,下面我们就来看看mac电... MAC 的「触发角」功能虽然提高了效率,但过于灵敏也让不少用户感到头疼。特别是在关键时刻,一不小心就可能触

CSS模拟 html 的 title 属性(鼠标悬浮显示提示文字效果)

《CSS模拟html的title属性(鼠标悬浮显示提示文字效果)》:本文主要介绍了如何使用CSS模拟HTML的title属性,通过鼠标悬浮显示提示文字效果,通过设置`.tipBox`和`.tipBox.tipContent`的样式,实现了提示内容的隐藏和显示,详细内容请阅读本文,希望能对你有所帮助... 效

Java8需要知道的4个函数式接口简单教程

《Java8需要知道的4个函数式接口简单教程》:本文主要介绍Java8中引入的函数式接口,包括Consumer、Supplier、Predicate和Function,以及它们的用法和特点,文中... 目录什么是函数是接口?Consumer接口定义核心特点注意事项常见用法1.基本用法2.结合andThen链

前端bug调试的方法技巧及常见错误

《前端bug调试的方法技巧及常见错误》:本文主要介绍编程中常见的报错和Bug,以及调试的重要性,调试的基本流程是通过缩小范围来定位问题,并给出了推测法、删除代码法、console调试和debugg... 目录调试基本流程调试方法排查bug的两大技巧如何看控制台报错前端常见错误取值调用报错资源引入错误解析错误