css2.1实现多重背景和边框效果
作者:linxz 来源:小志博客 发布时间:2010-06-23 19:02:00
使用css2.1实现多重背景、多重边框效果
在单个HTML元素上利用CSS2.1实现拥有3张背景图片和2张内容图效果,或者多重边框的效果。这种渐进增强的方式适用于所有支持CSS2.1伪元素及其定位属性的所有浏览器。不需要CSS3的支持。
支持的浏览器:Firefox 3.5+, Safari 4+, chrome4+, opera10+, IE8+
是如何实现的呢?
从本质上讲,我们所创建的伪对象(:before和:after)跟我们在对待HTML元素嵌套关系是相同的。但他们相对于嵌套使用的HTML元素而言具有其独特的优势——不具有语义化。
当使用多背景或者多重边框的时候,我们需要将伪元素层的内容利用绝对定位固定在HTML元素内容的后面。
并非真实的内容被伪元素所包含进行定位。这意味着他们能在“父”元素范围内随意拉伸的同时而不会影响其内容。这可以任意组合绝对定位的top、right、bottom、left、width和height的值,主要关键是他们的组合性能是灵活的。
可以达到什么效果?
仅需要依赖于一个HTML元素和相关的图片就可以创建类似于多背景颜色、多背景图、背景图片剪辑、图片翻转、使用图片边框的可扩展的盒模型、浮动的虚假列(小志注:后面会提到的三列等高效果)、在盒模型外的图片、显示在外面的多边框,以及其他流行的效果等。可能需要2张额外的内容图片在生成的内容中。
在使用CSS2.1的多背景和使用CSS2.1的多边框演示页面中将会展示如何使用CSS2.1伪对象的技术实现这些流行的效果。
大部分的结构都包含子元素。因此,往往很多时候,你将有可能通过父元素的第一个子元素(设置是最后一个子元素)的伪元素来展示更多的效果。此外,还可以通过:hover对样式产生一些复杂的交互效果的变化。


猜你喜欢
- 可能不少学习javascript在使用call,apply,callee时会感到困惑,以下希望对于你有所帮助:1、它是函数的方法或属性;2、
- 今天介绍一下 go语言的并发机制以及它所使用的CSP并发模型CSP并发模型CSP模型是上个世纪七十年代提出的,用于描述两个独立的并发实体通过
- 这个是python的一个内建函数,看书的时候发现了他,mark一下当我们既需要遍历索引同时需要遍历元素的时候,可以考虑使用enumerate
- 这次主要介绍字符串常用操作方法及例子1.python字符串在python中声明一个字符串,通常有三种方法:在它的两边加上单引号、双引号或者三
- 一、中间键的引入:Django中间件(Middleware)是一个 轻量级、底层的 “插件”系 统,可以介入 Django的请求和响应处理过
- 过滤器是一个通过输入数据,能够及时对数据进行处理并返回一个数据结果的简单函数。Vue有很多很便利的过滤器,过滤器通常会使用管道标志 “ |
- pymsqlpymsql是Python中操作MySQL的模块,其使用方法和MySQLdb几乎相同。下载安装pip3 install pymy
- 目录创建conda环境下载Apple提供的tensorflow支持安装环境前准备工作安装依赖及相关库测试参考资料苹果为M1芯片的Mac提供了
- 利用mask(掩模)技术提取纯色背景图像ROI区域中的人和物,并将提取出来的人或物添加在其他图像上。1、实现原理先通过cv.cvtColor
- 相信各位phper在日常开发中,会经常遇到需要合并数组的场景。那么,在php中都有哪一些方法可以用来合并数组呢。第一种,使用&ldq
- 一,如何检测和转换接口变量的类型在Go语言的interface中可以是任何类型,所以Go给出了类型断言来判断某一时刻接口中所含有的类型,例如
- server端代码:package main import ( "fmt" "net" "
- 网络上关于各种语言和应用软件的速查手册和快速参考指南有很多很多,不幸的是当我们需要的时候,总是很难找到,所以我决定花点时间尽可能的收集更多的
- 这篇文章主要介绍了如何给Python代码进行加密,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以
- 一、安装redis因为是在CentOS系统下安装的,并且是服务器。遇到的困难有点多不过。1.首先要下载相关依赖首先先检查是否有c语言的编译环
- 解读model.named_parameters()与model.parameters()model.named_parameters()迭
- 一.概述IO 内存是sql server最重要的资源,数据从磁盘加载到内存,再从内存中缓存,输出到应用端,在sql server 内存初探中
- 用于处理XML文档的DOM元素属性 childNodes:返回当前元素所有子元素的数组; firstChild:返回当前元素的第一个下级子元
- 本文实例讲述了python创建一个最简单http webserver服务器的方法。分享给大家供大家参考。具体实现方法如下:import sy
- 一、项目介绍 在此项目中,目的是预测爱荷华州A