课程咨询 :0551-64632520

合肥web前端培训

合肥web培训 > 达内新闻 > 合肥达内分享关于CSS的冷知识
  • 合肥达内分享关于CSS的冷知识

    发布:合肥web培训      来源:达内新闻      时间:2016-07-14

  • 合肥达内web前端培训的老师来为大家介绍几个CSS中的小知识,掌握这些,不管是在工作中还是在生活中都能平添不少乐趣。

    1、关于CSS的恶作剧

    相信你看完以下代码后能够预料到会出现什么效果。

    *{
    cursor: none!important;
    }

    2、简单的文字模糊效果

    以下两行简单的CSS3代码可达到将文字模糊化处理的目的,出来的效果有点像使用PS的滤镜!

    p {
    color: transparent;
    text-shadow: #111 0 0 5px;
    }

    3、垂直居中

    垂直居中显示某个DIV,我们知道CSS中天然有水平居中的样式text-align:center。唯独这个垂直居中无解。

    当然你可以将容器设置为display:table,然后将子元素也就是要垂直居中显示的元素设置为display:table-cell,然后加上vertical-align:middle来实现,但此种实现往往会因为display:table而破坏整体布局,那还不如直接用table标签了呢。

    下面这个样式利用了translate来巧妙实现了垂直居中样式,需IE9+。

    .center-vertical {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    }

    相比而言,水平居中要简单得多,像上面提到的text-align:center,经常用到的技巧还有margin:0 auto。但对于margin大法也只在子元素宽度小于容器宽度时管用,当子元素宽度大于容器宽度时此法失效。

    如法炮制,利用left和transform同样可实现水平居中,不过意义不大,毕竟text-align和margin差不多满足需求了。

    .center-horizontal {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    }

    4、多重边框

    利用重复指定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
    }

    5、实时编辑CSS

    通过设置style标签的display:block样式可以让页面的style标签显示出来,并且加上contentEditable属性后可以让样式成为可编辑状态,更改后的样式效果也是实时更新呈现的。此技巧在IE下无效。

    <!DOCTYPE html>
    <html>
    <body>
    <style style="display:block" contentEditable>
    body { color: blue }
    </style>
    </body>
    </html>

    6、创建长宽比固定的元素

    通过设置父级窗口的padding-bottom可以达到让容器保持一定的长度比的目的,这在响应式页面设计中比较有用,能够保持元素不变形。

    <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>

    7、CSS中也可以做简单运算

    通过CSS中的calc方法可以进行一些简单的运算,从而达到动态指定元素样式的目的。

    .container{
    background-position: calc(100% - 50px) calc(100% - 20px);
    }

    CSS里面的冷知识就先介绍到这里,了解更多web前端的资讯,欢迎点击合肥达内web前端培训中心官网。

    推荐文章

上一篇:合肥达内web专家教你网页布局的知识

下一篇:合肥达内推荐几款HTML5动画工具

最新开班日期  |  更多

WEB零基础周末班

WEB零基础周末班

开班日期:

WEB零基础全日制班

WEB零基础全日制班

开班日期:3-08

WEB前端业余班

WEB前端业余班

开班日期:3-08

WEB前端就业班

WEB前端就业班

开班日期:3-08

  • 地址:合肥市蜀山区肥西路66号汇金大厦21楼
  • 课程培训电话:0551-64632520     全国服务监督电话:400-827-0010
  • 服务邮箱 ts@tedu.cn
  • 2001-2016 达内时代科技集团有限公司 版权所有 京ICP证8000853号-56