淘宝灵活的圆角框--通过一个圆形图片形成圆角原理
具体实现方案就是通过隐藏/显示一个圆形的不同部分来实现圆角效果，具体分析见注释！！<!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
淘宝灵活的圆角框--通过一个圆形图片形成圆角原理相关推荐
- 淘宝3.25弹框技术分析，不只是程序员的事
点击蓝色关注,回复"职级"获取知名互联网公司职级定义 每月开展上个月读者阅读.转发.在看.留言各前三名(冠.亚.季军)评选活动,次月初开奖!欢迎参加,有惊喜. 两周前的3月25日, ...
- 下拉搜索词api接口、淘宝搜索下拉框选词api，淘宝下拉词接口，淘宝搜索的下拉词推荐接口、关键词推荐api
一.下拉搜索框选词api介绍 淘宝搜索下拉框选词是通过淘宝.天猫.手机润宝搜索下拉框查询淘宝搜索指数高.流量高.转化率高的关键词,并获取各关键词对应的在线相关宝贝数量及其推荐属性词.对于查询到的这些关 ...
- Android Virtualview：淘宝、天猫又开源了一个动态化、高性能的UI框架
转载 Carson_Ho Android Virtualview:淘宝.天猫又开源了一个动态化.高性能的UI框架 前言 目录 1. 为什么要向 Tangram模型 加入 VirtualView 2. ...
- Android Glide加载圆形图片、圆角图片，部分圆角图片的使用方法
Android Glide加载圆形图片.圆角图片,部分圆角图片的使用方法 前言 Gilde圆形图片/头像 Gilde普通圆角图片即四个角都是圆角 Gilde对指定角设置圆角 前言 通过本文,您可以实现 ...
- 微信小程序做一个圆形图片旋转可以控制开始和结束-音乐播放器的图片旋转功能
微信小程序做一个圆形图片旋转可以控制开始和结束 1.在 WXML 文件中添加一个 标签,并设置图片的 src 和样式,并为其绑定一个 animation 用来控制旋转动画. <image src ...
- 前淘宝工程师：12306几乎是一个奇迹
1月11日起,12306网站开始销售除夕当日火车票.每到此时,铁路系统唯一的官方购票网站12306就会成为众矢之的.今年也不例外,12306再次被淹没在一片埋怨声中. 1月10日,一位ID名为&quo ...
- Android Virtualview：淘宝、天猫又开源了一个动态化、高性能的UI框架力作
前言 淘宝.天猫一直致力于解决 页面动态化的问题 在2017年的4月发布了v1.0解决方案:Tangram模型 及其对应的 Android库 vlayout,该解决方案在手机淘宝.天猫 Android ...
- 和你生活最近的淘宝天猫背后，阿里还有一个你不知道的神秘组织
转自极客公园 对大部分人来说,生活中最熟悉的是那些贴近日常的服务:不论是淘宝.天猫,还是优酷.闲鱼,它们和我们最密切,因为你可能天天都会用到.但当提到阿里巴巴电商业务中台时,我相信身边大部分人会感觉很 ...
- 淘宝上传图片太大怎么办？怎么把图片压缩变小？
许多淘宝店主在给店铺上传商品展示图时,会由于平台对图片kb大小有500kb的限制会导致有些图片无法上传,这时候需要压缩图片大小来降低照片kb大小.怎么把图片压缩到500kb以下呢?下面给大家带来了一款 ...
最新文章
- node.js——麻将算法（六）简易版麻将出牌AI1.0
- 【转】线段树题目 汇总 讲解（by not only success）
- 计算机知识竞赛决赛流程,计算机知识竞赛决赛圆满结束！还不快戳？！
- git commit 规范指南
- 行，这本 Python 书彻底火了！
- Oracle函数——日期函数
- java基础题100道
- IAR MCS-51 v7.51A 软件注册机下载
- [项目源码]ERP进销存系统
- JavaSE基础——异常机制
- 开源社区怎么玩？明星项目 TiKV 的 Maintainer 这样说……
- 攻壳机动队中的塔奇克马有灵魂吗？烧脑深度思考，慎点
- DDD（领域驱动设计）专题（一）：什么是DDD?
- 机智云AIoT开发平台，物联网开发和运营从未如此简单
- Debug的心路历程
- C#使用随机数模拟器来模拟世界杯排名(三)
- 光谷计算机专业好的学校,华一寄、华一初、华一光谷哪所学校更好（综合对比）...
- Unity3D常用游戏开发插件测评总结
- Linux查hudi服务的进程,Linux查看非root运行的进程
- 2022最新苹果iOS证书制作教程