CSS3你可能不知道的冷知识

谁借莪１个温暖的怀抱￠ 2024-04-17 20:26 68阅读 0赞

## 样式计算 ##

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

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

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

## 模糊文字 ##

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

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

其实就是利用了我们熟悉的text-shadow配合前景色透明  
实现类似滤镜的效果  
![在这里插入图片描述][20190831152559550.png]

## 多重边框 ##

可能我们利用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);
    }

![在这里插入图片描述][20190831152351895.png]

## 指针事件 ##

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

a {
        pointer-events: none;
    }

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

## 书写模式 ##

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

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

![在这里插入图片描述][20190831152536518.png]

[20190831152559550.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/5ab8e2d768fc43b6b7d4eb3d84a7e9f0.png
[20190831152351895.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/cbdfb1d2bf3c43f8babb0caca800b813.png
[20190831152536518.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/4316b0db7cf4474aa899ed53ca36734e.png