淘宝灵活的圆角框--通过一个圆形图片形成圆角原理

具体实现方案就是通过隐藏/显示一个圆形的不同部分来实现圆角效果,具体分析见注释!!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>淘宝-1图像圆角框</title>
<!--这里利用的只显示圆形图像的部分来达到圆形的效果-->
<style type="text/css">
* {margin:0;padding:0;
}
body {font:20px Verdana, Geneva, sans-serif;padding:10px;
}
.main {width:600px;margin:0 auto;
}
.main, .main .hd, .main .ft, .main em {background:url(main_panel_corners.gif) no-repeat 0 0; /*首先main中的图像是完全显示的,因为其内容高度大于图像高度,1/4部分被.hd span 中的白色盖住,1/2被bd中的白色盖住*/
}
.main .hd {background:url(main_panel_corners.gif) no-repeat right top;padding:0 5px;  /*这样的话,.hd span 的宽度就正好是hd-5-5(圆的半径),通过设置span的背景颜色,正好将圆的1/4部分遮住,形成圆角,注意此时hd中的圆形背景只显示1/2(上半部分,因为其高度是通过(span中的padding-top设置的为5px,所以只能显示上半部分)*/
}
.main .hd span {padding-top:5px;background:white;border-top:1px solid #a9cfff;display:block;
}
.main .ft {background:url(main_panel_corners.gif) no-repeat bottom left;
}
.main .ft em {background:url(main_panel_corners.gif) no-repeat bottom right;padding:0 5px;display:block;
}
.main em span {padding-top:5px;background:white;border-bottom:1px solid #a9cfff;display:block;
}
.main .bd { /*不能设置上边距,因为这样的话就不能够完全遮挡.main 背景图片的1/2部分了*/border:1px solid #a9cfff;border-width:0 1px;background:white;padding:10px;}
h1 {padding:10px 20px;}
p {line-height:140%;text-indent:2em;}
</style>
</head>
<body>
<div class="main"><div class="hd"><span></span></div><div class="bd"><h1>Mozilla Firefox</h1><p>我爱beyond网立志做全国最大的专业纪念beyond网站,www.ilovebeyond.com</p><p>Internet Explorer is Microsoft's new version of the Windows operating system as an integral part. In an earlier version of the operating system, it is an independent, free of charge. Windows 95 OSR2 from the beginning, it was all tied up as a new version of the Windows operating system in the default browser. However, the recent (2004 ~ 2005), a major update applies only to Windows XP SP2 and Windows Server 2003 SP1. Initially, Microsoft plans and the next version of the Windows operating system release Internet Explorer 7, but Microsoft recently announced that, Internet Explorer 7 in a test version (Beta 1) in the summer of 2005 will be made available to Windows XP SP2 users. In the second half of 2006 released Windows Vista will be bundled with the official version of Internet Explorer 7.0. 2008 on 5 years 3 release of Internet Explorer 8 Beta1.</p><p>As the first by bundling Windows and gain market share and growing out of major security hole, the implementation of its own inefficient and does not support W3C standards, Internet Explorer has been criticized, but had to admit it for the development of the Internet has contributed to .</p><p> Referred to as IE or MSIE, Microsoft launched a web browser. Internet Explorer is the most widely used Web browser, although since 2004 it has lost some market share. In April 2005, it has a market share of about 85%.</p></div><div class="ft"><em><span></span></em></div>
</div>
</body>
</html>

转载于:https://www.cnblogs.com/beyond1990/archive/2011/06/01/2065319.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/495476.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

安卓逆向_6 --- Dalvik 字节码、Smali 详解

CTF Wiki smali&#xff1a;https://ctf-wiki.org/android/basic_operating_mechanism/java_layer/smali/smali/ 深入理解 Dalvik 字节码指令及 Smali 文件&#xff1a;https://blog.csdn.net/dd864140130/article/details/52076515 安卓逆向入门教程&#xff08;二&#xff09…

Optional源码级详解

认识Optional Opitonal类就是Java提供的为了解决大家平时判断对象是否为空用&#xff0c;通常会用 null!obj 这样的方式存在的判断&#xff0c;从而令人头疼导致空指针异常&#xff0c;同Optional的存在可以让代码更加简单&#xff0c;可读性跟高&#xff0c;代码写起来更高效…

NASA宣布在火星上发现了3种有机分子

图来自美国国家航空航天局来源&#xff1a;海外网摘要&#xff1a;美国国家航空航天局&#xff08;NASA&#xff09;召开新闻发布会&#xff0c;公开了火星新发现——好奇号火星探测器在火星上发现了有机分子。当地时间周四&#xff08;7日&#xff09;&#xff0c;美国国家航空…

POJ 2255/递归:前序中序求后序

Sample Input DBACEGF ABCDEFG 已知二叉树的前序遍历与后序遍历求后序遍历 算法&#xff1a;前序遍历时&#xff0c;第一位为根&#xff1a;D&#xff1b;找到中序中的D&#xff0c;则前面的ABC在左子树&#xff0c;右边的EFG在右子树&#xff0c;则后序为为左子树右子树根:sol…

Chrome 爬虫插件 Web Scraper

Web Scraper 官网&#xff1a;https://webscraper.io/ 有关webscraper的问题&#xff0c;看这个就够了&#xff08;建议收藏&#xff09;&#xff1a; https://zhuanlan.zhihu.com/p/34104808https://blog.csdn.net/biggbang/article/details/86251526 web scraper 入门到精通…

AI新方向: 科学家们暂停模仿“人脑”,公布了新路线图

来源&#xff1a;华尔街新闻摘要&#xff1a;科学家们一直致力于创造一种像人类一样思考的机器&#xff0c;但经过一段时间的探索&#xff0c;这一进程遇到了阻碍&#xff0c;他们基本上已经暂停了模仿“人脑”&#xff0c;转而研究已有发现的应用。科学家们一直致力于创造一种…

C++ primer 4th 第10章《关联容器》总结

表10-1 关联容器类型 map 关联数组&#xff1a;元素通过键来存储和读取 set 大小可变的集合&#xff0c;支持通过键实现的快速读取 multimap 支持同一个键多次出现的map类型 multimap 支持同一个键多次出现的set类型 表10-2 pair类型提供的操作 pair<T1,T2> p1;…

强势~迷惑法应对

1、承认事实&#xff1b; 2、承认可能性&#xff1b; 3、原则上同意。 1、承认事实&#xff1b; 母亲&#xff1a;莎莉&#xff0c;你有很晚才回家。昨晚我到12点半&#xff0c;还给你打过电话呢。莎莉&#xff1a;是的&#xff0c;妈妈&#xff0c;昨晚我又回来得很晚。 2…

Hack.Chat 在浏览器里快速建立简单、随用即丢线上聊天室,无须下载安装软体

From&#xff1a;http://www.luoxiao123.cn/1554-6.html 有时候想跟其他使用者线上文字对话&#xff0c;但又不想把自己的联络资料&#xff08;例如 Facebook 或即时通讯帐号&#xff09;泄漏给对方&#xff0c;有些人可能会选择申请一个临时使用的帐号&#xff0c;但这未免也太…

CCAI2018 | 韩家炜:大规模文本数据挖掘的新方向

来源&#xff1a;中国人工智能学会现实中的大数据常常表示为一种非结构化&#xff0c;交叉和动态变化的文本数据。如何从大规模文本数据中抽取结构化知识是一个非常值得研究的任务。很多研究工作依赖于劳动密集型的数据标注&#xff0c;用有监督的方法去抽取知识。但是&#xf…

关于面试宝典中的各个问题(一)

1、关于浮点数1.0f在内存中的表示&#xff1a;是3f800000. 各个类型所占的字节数&#xff08;byte&#xff09;&#xff0c;1byte8bit char 1 short 2 bool 1 int 4 long 4 float 4 double 8 long double 8 char * 4 int * 4 float * 4 以上是对于我的电脑&#xff0c;在典型…

安卓手机 Python 自动化( uiautomation、uiautomation2、weditor )

其他自动化工具或者框架&#xff1a; Airtest&#xff1a;https://airtest.readthedocs.io/zh_CN/latest/autojs&#xff1a;Auto.js快速入门实战教程&#xff1a;https://zhuanlan.zhihu.com/p/90065914appium&#xff1a;https://blog.csdn.net/freeking101/article/details…

强势~否定决断法

否定决断法套路 对方&#xff1a;“你在......上做得不是很好”&#xff08;批评&#xff09;你&#xff1a;“你说得对。我在处理那个的时候不太机灵&#xff0c;对吗”&#xff08;否定决断法&#xff09; 示例一&#xff1a; 同事&#xff1a;“上周答应给的那份参考文档…

C++/C宏定义中## 连接符与# 符的含义

http://blog.163.com/wshyao126/blog/static/1070451420081018103237836/ ## 连接符与# 符 ## 连接符号由两个井号组成&#xff0c;其功能是在带参数的宏定义中将两个子串(token)联接起来&#xff0c;从而形成一个新的子串。但它不可以是第一个或者最后一个子串。所谓的子串(t…

揭秘|多伦多大学反人脸识别,身份欺骗成功率达99.5%

来源 &#xff1a;机器人大讲堂摘要&#xff1a;在一些社交媒体平台&#xff0c;每次你上传照片或视频时&#xff0c;它的人脸识别系统会试图从这些照片和视频中得到更多信息。比如&#xff0c;这些算法会提取关于你是谁、你的位置以及你认识的其他人的数据&#xff0c;并且&am…

安卓逆向_8 --- Android 调试工具 DDMS 和 Monitor ( 去掉 车来了 app 的广告 )

From&#xff1a;https://www.e-learn.cn/topic/3527658 Android SDK 中的 ddms 使用详解&#xff1a;https://blog.csdn.net/x83853684/article/details/80643131 ADB、Android Monitor、DDMS、HierarchyViewer、MAT、SysTrace、TraceView 性能分析工具使用大全&#xff1a;…

杂谈 | 微软复兴,它与苹果竟有这么多相似之处!

来源&#xff1a;网易智能摘要&#xff1a;且不要谈CEO们是否会让他们公司的“重生”&#xff0c;仅仅是成为一个成功帝国的好管家就已经是一项了不起的成就了。上周&#xff0c;微软市值超过了谷歌母公司Alphabet&#xff0c;成为继苹果&#xff08;Apple&#xff09;和亚马逊…

全能终端神器 --- MobaXterm 、开启 linux 远程桌面

From&#xff1a;https://cloud.tencent.com/developer/news/244102 官网地址&#xff1a;https://mobaxterm.mobatek.net MobaXterm 20.2_Professional.7z 下载地址&#xff1a;https://download.csdn.net/download/freeking101/12363312 MobaXterm 又名 MobaXVT&#xff0c…

强势~帮不了别人,也不用内疚

妻子的控诉 妻子&#xff1a;“你要是再让我生气&#xff0c;咱们就离婚。” 这种想法会让对方产生负疚感&#xff0c;因为言下之意是&#xff0c;婚约和两人之间的关系&#xff0c;要比夫妻双方的个人意愿和幸福更重要。 丈夫&#xff1a;“要是你确实觉得受不了&#xff0c…

【转】盛大创新院许式伟:影响我一生的五个重要选择

盛大创新院许式伟&#xff1a;影响我一生的五个重要选择 资料来源&#xff1a;http://www.programmer.com.cn/4206/ 作者&#xff1a; wuzhimin分类&#xff1a;坊间人语阅读&#xff1a;40,227 次添加评论文 / 许式伟 每个人的际遇是不同的&#xff0c;面临选择时&#xff0c;…