不使用border-radius,实现一个可复用的高度和宽度都自适应的圆角矩形
现在css3支持圆角矩形,但是为了兼容性问题,虽然比较麻烦,但还是有必要了解一下以下方法。
在一个div内,包含8个div,控制这个8个div的height、margin以及border属性值,以达到圆角矩形效果,不过要注意div的顺序。
html代码:
<body> <div class="bor">
<div class="b1"></div>
<div class="b2"></div>
<div class="b3"></div>
<div class="b4"></div>
</div> <div class="mid">
<p>不使用border-radius的情况下实现一个可复用的高度和宽度都自适应的圆角矩形</p>
</div> <div class="bor">
<div class="b4"></div>
<div class="b3"></div>
<div class="b2"></div>
<div class="b1"></div>
</div> </body>
css代码:
.bor div { height: 1px; } .b1 {
margin: 0 3px;
background-color: black;
} .b2,
.b3,
.b4,
.mid {
border-left: 1px solid black;
border-right: 1px solid black;
} .b2 {
margin: 0 2px;
} .b3 {
margin: 0 1px;
} .b4 {
margin: 0 1px;
} .mid p {
margin:;
padding:0 10px;
font-size: 12px;
line-height: 24px;
white-space: pre-wrap;
}
不使用border-radius,实现一个可复用的高度和宽度都自适应的圆角矩形的更多相关文章
- Android学习笔记-构建一个可复用的自定义BaseAdapter
转载自http://www.runoob.com/w3cnote/android-tutorial-customer-baseadapter.html 作者:coder-pig 本节引言: 如题, ...
- 编写一个可复用的SpringBoot应用运维脚本
前提 作为Java开发者,很多场景下会使用SpringBoot开发Web应用,目前微服务主流SpringCloud全家桶也是基于SpringBoot搭建的.SpringBoot应用部署到服务器上,需要 ...
- 实现一个div,左边固定div宽度200px,右边div自适应
实现一个div,左边固定div宽度200px,右边div自适应<div class= "container"> <div class="left&quo ...
- 每一个成功的程序员的身后都有一个--------Parse
相信好多同行都用过Parse,而正是因为Parse给我们的开发带来的极大的便利,才有了项目从零开始,到正式上线仅仅用上不到两周的时间,现在Swift还在迅速的发展,很快就会占有大量的市场,现在就就结合 ...
- Android 如何添加一个apk使模拟器和真机都编译进去 m
添加一个apk都需要将LOCAL_PACKAGE_NAME的值添加到PRODUCT_PACKAGES才行.而PRODUCT_PACKAGES一般在build/target/product/目录下的文件 ...
- 自定义一个可复用的BaseAdapter
1.我们一点点开始改: 首先我们自定义BaseAdapter,等下我们就要对他进行升级改造 /** * Created by Jay on 2015/9/21 0021. */ public clas ...
- NG2-我们创建一个可复用的服务来调用英雄的数据
<英雄指南>继续前行.接下来,我们准备添加更多的组件. 将来会有更多的组件访问英雄数据,我们不想一遍一遍地复制粘贴同样的代码. 解决方案是,创建一个单一的.可复用的数据服务,然后学着把它注 ...
- Python爬虫之编写一个可复用的下载模块
看用python写网络爬虫第一课之编写可复用的下载模块的视频,发现和<用Python写网络爬虫>一书很像,写了点笔记: #-*-coding:utf-8-*- import urllib2 ...
- 如果用css的border属性画一个三角形
假设页面中有个div,如何通过css做一个三角形.这是我们项目中用到的今天就稍微总结下.顺便说一句偷偷写博客的感觉还挺爽 div { width: 0; height: 0; border-top: ...
随机推荐
- struts2学习笔记(5)---自己定义拦截器
什么是拦截器? struts2中拦截器分为Struts2定义好的拦截器和自己定义的拦截器. 其作用是在一个Action运行之前进行拦截,在Action运行之后又增加某些操作. 实现原理 当请求一个Ac ...
- 用linq实现登陆功能
BLL层的逻辑代码 using System; using System.Collections.Generic; using System.Linq; using System.Text; name ...
- Tomcat 配置 Probe 监控
转至:http://9771104.blog.163.com/blog/static/19446622009811112836524/ 手上接触Tomcat的项目越来越多,虽说tomcat的manag ...
- dos常用文件操作命令
1.DIR 含义: 显示指定目录下的文件和子目录列表 类型: 内部命令 格式: DIR[drive:][path][filename][/p][/w][/A[[:]attributes]][/O[[: ...
- Models
Models Models control the data source, they are used for collecting and issuing data, this could be ...
- java编程常用技术
一:将String字符串放在最前面 防止发生NullPointerException异常,我们通常把String字符串放在equals方法的左边来比较,这样可以有效的避免 空指针异常的发生. 第一种情 ...
- Java内存模型——可见性
/** * 可见性问题 * @author Snway * */public class Visibility { private static boolean stop; ...
- 关于Collections中的sort()方法总结
用Java集合中的Collections.sort方法对list排序的两种方法 本文部分引用自:http://my.oschina.net/leoson/blog/131904 用Collection ...
- RPC之Thrift学习实战
关于Thrift的学习实战请参考:http://blog.csdn.net/column/details/slimina-thrift.html
- 亲测 asp.net 调用 webservice返回json
前端脚本 $("#sure").click(function () { var tbody = $("#putsigal tbody"); var trs = ...