zoukankan      html  css  js  c++  java
  • 精通css 学习笔记之图像

    CSS之圆角

    1,固定宽度的圆角框

        这种圆角框是最容易创建的,它只需要三个图像,一个图像用户框的顶部,另一用户底部,还有一个用于中间。

    2,滑动门技术

         采用一个图像在另一个图像上滑动,将它的一部分隐藏起来,这个需要更多的图像,因此需要定义额外的无语义元素如:

         <div class="box">

        <div class="box-outer"></div>  

          <div class="box-inner">

            <h2>Headline</h2>

            <p>Content</p>

          </div>

        </div>

      </div>

    3,三顶角技术

    阴影

    1,简单的CSS阴影

         原理:将一个大的阴影图像应用于容器div的背景,然后使用负值的空白边偏移这个图像从而显示出阴影。

    2,Clagnut的阴影

      与上一个原理相似,但是其不使用负值的空白变,而是相对定位。

    图像替换

    1,FIR

      原理:把要替换的文本放在span标签中,然后将span标签设置为:display:none从而隐藏span内容,但是这样会产生一个问题,许多屏幕阅读器会忽略那些display:none或hidden的元素,因此会忽略这个文本,造成严重的可访问性问题,不提倡使用。

    2,Phark

      原理:不使用display来隐藏文本,而是应用一个非常大的负值文本缩进

      问题:在关闭图像但是打开css的情况下是无效的,在重要信息或导航信息,最好不使用。

    3,Gilder/Levin

      <h2><span></span>test</h2>

      原理:将元素大小设置与图像相同,position:relative,然后将span设置背景图,position:absolute,宽、高100%,缺点:必须使用实色背景的图像,需要添加无语义标签span

  • 相关阅读:
    控制HTML Input只能输入数字和小数点
    VS中的路径宏 vc++中OutDir、ProjectDir、SolutionDir各种路径
    C# ListView用法详解
    wordpress学习五: 通过wordpress_xmlrpc的python包远程操作wordpress
    用IDEA开发简单的Servlet
    在centOS中安装mongodb
    simhash-- 一种文档去重的算法
    一个java实现的简单的4则运算器
    搭建ZooKeeper
    java入门--4111:判断游戏胜者-Who Is the Winner
  • 原文地址:https://www.cnblogs.com/urols/p/2855411.html
Copyright © 2011-2022 走看看