CSS3中有一些你不知道的冷知识

黄舟
Lepaskan: 2017-05-21 15:34:50
asal
1888 orang telah melayarinya

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

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

样式计算

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

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

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

模糊文字

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

.demo {    ...
    color: transparent;    text-shadow: black 0 0 2px;}
Salin selepas log masuk

其实就是利用了我们熟悉的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);}
Salin selepas log masuk

指针事件

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

a {    pointer-events: none;}
Salin selepas log masuk

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

书写模式

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

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

元素裁剪

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

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

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


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

Atas ialah kandungan terperinci CSS3中有一些你不知道的冷知识. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan