也谈网页圆角的背景图法(2)
作者:大伟 来源:大伟blog 发布时间:2009-03-19 14:09:00
标签:css教程,背景,圆角
3、以上是一般网站局部使用圆角的常见处理方法,但如果是整站的UI都很圆的话,显然上面2个常见的方法就不是很好用了,到处都是圆角,高度宽度都随意变换的情况下。我们有必要来一个兼容性更好的背景图法了。这也必然把我们带到了最开始的“九宫格”模式中去了。
同样是基于这种“九宫格”处理的思想,在代码实现上各个网站也有各自的招。
1、头、尾各用3个标签(div or span)来实现圆角,中间直接用border-left、border-right属性来补2边。
2、用一个很大很大的圆角图片,然后来个若干层div嵌套实现,道理和最上面说的拉长高度和拉长宽度是一样的,它这个是双向无限拉长,比如Facebooke的这个圆角处理的背景图片是2000*16像素的尺寸。更大的我看到就是饭否的这张1000*1000像素的了。请看例子。
3、图太大了,总难免是有点舍不得用的,那就用小图,看淘宝网首页的,实现圆角的图片圆角就是这样的。它的原理是在标准的边框实现之后,再额外地向4个角加上一张小图片去补圆,它这个做法,除了图片是小的之外,在网页加载背景图之前,也是有一个比较好的视觉呈现的。示意图如下:
具体代码请看例子。


猜你喜欢
- 在微软的ASP编程体系中,ADO对象的建立,使得从网页访问数据库成为一件易事,特别是ADO的Recordset对象使得控制数据的输出显示更为
- Python字典的遍历方法有好几种,其中一种是for...in,这个我就不说明,在Python了几乎随处都可见for...in。下面说的这种
- 今天有一位同学给了我一个excel文件,要求读取某些行,某些列,然后我试着做了一个demo,这里分享出来,希望能帮到大家:首先安装xlrd:
- 就前面所讲,函数的基本内容已经完毕。但是,函数还有很多值得不断玩味的细节。这里进行阐述。参数的传递python中函数的参数通过赋值的方式来传
- 作者:Robert Lair and Jason Lefebvr Intensity Software, Inc.
- 为了防止网络上日益猖獗的垃圾广告和灌水评论,大多数网站在信息发布的时候要求输入验证码。图片、文字、字母甚至还有计算题。验证码图片里的信息东颠
- 今天我还在摸鱼的时候,运维过来拍拍我的肩膀,告诉我现网内存泄露了。于是我就停下摸鱼的手,开始了问题排查。通过 pprof 火焰图来分析程序的
- 参数解释DataFrame.sort_values(by, &nbs
- 背景说明服务部署在阿里云的K8s上,配置了基于Prometheus的Grafana监控。原本用的是自定义的Metrics接口统计,上报一些字
- 在这个情人节前夕,我把现任对象回收掉了,这段感情积攒了太多的失望,也给了我太多的伤害,所以我看到这个活动的第一反应是拒绝的。然而人生嘛,最重
- 在用Python做开发的时候经常会用到数据库或者其他需要动态配置的东西,硬编码在里面每次去改会很麻烦。Python自带有读取配置文件的模块C
- Javascript脚本实现静态网页加密,阅读Javascript脚本实现静态网页加密,前两天看见有人问静态网页加密问题,就写了这个代码思路
- CREATE TABLE `category` ( `Id` binary(1
- CUDA的线程与块GPU从计算逻辑来讲,可以认为是一个高并行度的计算阵列,我们可以想象成一个二维的像围棋棋盘一样的网格,每一个格子都可以执行
- 早上我偶然看见一篇介绍两个Python脚本的博文,其中一个效率更高。这篇博文已经被删除,所以我没办法给出文章链接,但脚本基本可以归结如下:f
- 我在用 ASP 写一个数据库的应用的时候,总是被那些看起来好好的SQL语句执行起来产生的错误代码搞得头疼,请问有没有更好的解决办法啊?有,我
- 1在配置文件中添加skip-grant-tables后重启mysql,然后直接登录[root@tyjs09 ~]# cat /etc/my.
- 一、前言Python语言近年来人气爆棚。它广泛应用于数据科学,人工智能,以及网络安全问题中,由于代码可读性较强,学习效率较高,吸引了许多非科
- Bit-Packed Data TypesMySQL有一些存储类型使用一个值中的一些单个的比特位来紧凑的存储数据。纯技术上将,不管是底层的存
- 1、最简单的调用方式 直接写到html的body标签里面,如: <html> <body onload="fun