gzyueqian
13352868059

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

更新时间: 2017-07-28 14:30:37来源: 粤嵌教育浏览量:5818

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来实现,但此种实现往往会因为displaytable而破坏整体布局,西安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: ; 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( - 50px) calc( - 20px);

}

知道上面提到的小技巧,可能在web前端开发中更加方便,成品得到更好的效果,以上是粤嵌西安web前端培训带来的CSS小技巧。

 

 

 

免费预约试听课