搜索
首页web前端css教程CSS3中有一些你不知道的冷知识

可能我们在看一些网页的源码时 

会发现自己从来没见过的属性或用法
今天我就来总结一下
CSS3的冷知识

样式计算

在CSS中也可以进行简单的计算
通过calc函数可以实现
这样还可以使我们的元素自适应
当然计算的值应该是合法的值

.demo {    ...
    width: calc(100% - 500px);    height: 200px;}

这个demo中,元素的宽度值是父元素宽度减去500像素
如果父元素是body
改变视窗的大小,它的宽度也会随之改变

模糊文字

两行简单的代码就可以实现模糊文字的效果

.demo {    ...
    color: transparent;    text-shadow: black 0 0 2px;}

其实就是利用了我们熟悉的text-shadow配合前景色透明
实现类似滤镜的效果

多重边框

可能我们利用border和outline可以实现两层边框
其实我们可以利用盒阴影实现多重边框的效果

.demo {    ...
    box-shadow: 0 0 0 10px rgba(0, 0, 0, 0.2), 
                0 0 0 20px rgba(0, 0, 0, 0.2), 
                0 0 0 30px rgba(0, 0, 0, 0.2), 
                0 0 0 40px rgba(0, 0, 0, 0.2),                0 0 0 50px rgba(0, 0, 0, 0.2),                0 0 0 60px rgba(0, 0, 0, 0.2),                0 0 0 70px rgba(0, 0, 0, 0.2),                0 0 0 80px rgba(0, 0, 0, 0.2);}

指针事件

pointer-events属性可以让我们控制光标在鼠标点击、拖拽等事件的行为

a {    pointer-events: none;}

添加了这个样式后,链接就会失效
甚至鼠标悬浮在这个链接上都不会变成pointer的光标样式

书写模式

writing-mode属性用于指定书写模式
这个属性是为了解决不是所有语言都是从左到右的书写习惯
比如说我想指定书写模式垂直方向从右向左

.demo {    width: 100px;    height: 100px;    writing-mode: vertical-rl;    border: 1px solid black;}

元素裁剪

可能我们用过对图片裁剪的属性background-clip
但其实css可以对元素裁剪
就是用clip属性
不过好像真的不常用
这个属性很娇气
它只有在absolute或fixed定位的时候才生效
这个属性这样用

.demo {    ...
    position: absolute;    clip: rect(20px,140px,140px,20px);}

不过我在chrome浏览器上使用这个属性时
发现它和背景图片的裁剪还不太一样
四个像素值虽然同样分别对应上右下左
但是只有第一个值(上)和最后一个值(左)是指定裁剪多大的尺寸
而第二个值(右)和第三个值(下)更像是保留多大的尺寸
由于不常用,这里就不细说了
感兴趣的同学可以在浏览器上调试一下


暂时写这些
以后再想到什么
整理在这里

以上是CSS3中有一些你不知道的冷知识的详细内容。更多信息请关注PHP中文网其他相关文章!

声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
这么多颜色链接这么多颜色链接Apr 13, 2025 am 11:36 AM

最近有一系列有关颜色的工具,文章和资源。请允许我通过将它们四舍五之后关闭几个标签,以供您享受。

自动利润在Flexbox中的工作方式自动利润在Flexbox中的工作方式Apr 13, 2025 am 11:35 AM

罗宾以前已经介绍过这一点,但是我在过去的几周里听到了一些关于它的困惑,看到另一个人在解释它,我想

移动彩虹移动彩虹Apr 13, 2025 am 11:27 AM

我绝对喜欢三明治网站的设计。在许多美丽的功能中,这些标题是滚动时带有彩虹的下线。它不是

新年,新工作?让我们做一个网格驱动的简历!新年,新工作?让我们做一个网格驱动的简历!Apr 13, 2025 am 11:26 AM

许多流行的简历设计通过以网格形状铺设部分来充分利用可用的页面空间。让我们使用CSS网格创建一个布局

将用户摆脱过多习惯的一种方法将用户摆脱过多习惯的一种方法Apr 13, 2025 am 11:25 AM

页面重新加载是一回事。有时,当我们认为它没有响应或认为新内容可用时,我们会刷新页面。有时我们只是生气

域驱动的设计与React域驱动的设计与ReactApr 13, 2025 am 11:22 AM

关于如何在React世界中组织前端应用的指导很少。 (只需移动文件,直到“感觉正确”,大声笑)。真相

检测非活动用户检测非活动用户Apr 13, 2025 am 11:08 AM

大多数情况下,您并不真正在乎用户是否积极参与或暂时非活动。不活跃,意思,也许他们

Wufoo ZapierWufoo ZapierApr 13, 2025 am 11:02 AM

Wufoo一直在集成方面非常出色。他们与特定应用程序(例如广告系列显示器,MailChimp和Typekit)进行集成,但他们也

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
3 周前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳图形设置
3 周前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您听不到任何人,如何修复音频
3 周前By尊渡假赌尊渡假赌尊渡假赌
WWE 2K25:如何解锁Myrise中的所有内容
4 周前By尊渡假赌尊渡假赌尊渡假赌

热工具

适用于 Eclipse 的 SAP NetWeaver 服务器适配器

适用于 Eclipse 的 SAP NetWeaver 服务器适配器

将Eclipse与SAP NetWeaver应用服务器集成。

Atom编辑器mac版下载

Atom编辑器mac版下载

最流行的的开源编辑器

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

功能强大的PHP集成开发环境

VSCode Windows 64位 下载

VSCode Windows 64位 下载

微软推出的免费、功能强大的一款IDE编辑器

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境