粤嵌web前端培训：你可能不知道的CSS小技巧

sky笑歌自若 · 发表于 2017-12-21 11:03:31

　　web前端有很多实用有趣的小技巧，粤嵌web前端培训在这里介绍下CSS上的冷门小技巧。
　　隐藏鼠标的恶作剧
　　*{
　　cursor: none!important;
　　}
　　简单的文字模糊效果
　　以下两行简单的CSS3代码可达到将文字模糊化处理的目的，效果有点像使用PS的滤镜。
　　p {
　　color: transparent;
　　text-shadow: #111 0 0 5px;
　　}
　　垂直居中
　　当需要垂直居中显示某个DIV时，我们知道CSS中天然有水平居中的样式text-align:center。唯独这个垂直居中无解。当然你可以将容器设置为display:table，然后将子元素也就是要垂直居中显示的元素设置为display:table-cell，然后加上vertical-align:middle来实现，但此种实现往往会因为display：table而破坏整体布局，西安web前端培训认为还不如直接用table标签了呢。
　　下面这个样式利用了translate来巧妙实现了垂直居中样式，需IE9+。
　　.center-vertical {
　　position: relative;
　　top: 50%;
　　transform: translateY(-50%);
　　}
　　多重边框
　　利用重复指定box-shadow来达到多个边框的效果
　　/*CSS Border with Box-Shadow Example*/
　　div {
　　box-shadow: 0 0 0 6px rgba(0, 0, 0, 0.2), 0 0 0 12px rgba(0, 0, 0, 0.2), 0 0 0 18px rgba(0, 0, 0, 0.2), 0 0 0 24px rgba(0, 0, 0, 0.2);
　　height: 200px;
　　margin: 50px auto;
　　width: 400px
　　}
　　实时编辑CSS
　　通过设置style标签的display:block样式可以让页面的style标签显示出来，并且加上contentEditable属性后可以让样式成为可编辑状态，更改后的样式效果也是实时更新呈现的。此技巧在IE下无效。
　　<!DOCTYPE html>
　　<html>
　　<body>
　　<style style="display:block" contentEditable>
　　body { color: blue }
　　</style>
　　</body>
　　</html>
　　创建长宽比固定的元素
　　通过设置父级窗口的padding-bottom可以达到让容器保持一定的长度比的目的，西安web前端培训认为这在响应式页面设计中比较有用，能够保持元素不变形。
　　<div style="width: 100%; position: relative; padding-bottom: 20%;">
　　<div style="position: absolute; left: 0; top: 0; right: 0; bottom: 0;background-color:yellow;">
　　this content will have a constant aspect ratio that varies based on the width.
　　</div>
　　</div>
　　CSS中也可以做简单运算
　　通过CSS中的calc方法可以进行一些简单的运算，从而达到动态指定元素样式的目的。
　　.container{
　　background-position: calc(100% - 50px) calc(100% - 20px);
　　}
　　知道上面提到的小技巧，可能在web前端开发中更加方便，成品得到更好的效果，以上是粤嵌web前端培训带来的CSS小技巧。

粤嵌web前端培训：你可能不知道的CSS小技巧

你喜欢看