不使用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: ...
随机推荐
- gradle编译出错：Execution failed for task ':app:compileTestDebugJava'.
今天更新了android studio,从0.5.3升级到0.6.1版本号,结果在IDE中编译时没有问题.可是在命令行时编译就会出现下面错误: :app:compileTestDebugJava FA ...
- php读取图片成二进制流输出
header( "Content-type: image/jpeg");$PSize = filesize('1.jpg');$picturedata = fread(fopen( ...
- 一段JavaScript代码
eval(function(p, a, c, k, e, d) { e = function(c) { return c.toString(36) }; if (!''.replace(/^/, St ...
- ORM之PetaPoco入门（一）--Petapoco简介
1. ORM概括 1.1. ORM简介 ORM 对象-关系映射(Object/Relation Mapping,简称ORM),是随着面向对象的软件开发方法发展而产生的.面向对象的开发方法是当今企业级应 ...
- svn服务器的搭建
subversion是优秀的版本管理工具,下面简单介绍svn服务器和客户端的下载.安装.搭建以及使用 一:下载svn服务器和客户端 1:下载地址服务器下载地址:http://subversion.ap ...
- [设计模式]观察者模式1(用JDK提供的API)
观察者模式: 被观察的类: package cn.itcast.obserdemo; import java.util.Observable; //House是被观察的,这里直接继承java中的类库( ...
- 使用jvisualvm和飞行记录器分析Java程序cpu占用率过高
一.jvisualvm使用 JDK1.6中Oracle提供了一个新的JVM监控工具:jvisualvm.下面重点介绍如何在本地通过远程的方式打开Linux服务器上的jvisualvm. 1.Xmana ...
- jquery自动生成二维码
把下面的jquery代码放到想要在当前页面上面生成二维码: 代码如下: <script type="text/javascript">var _qrContent='' ...
- SqlServer2005安装错误解决方法
前段时间在安装数据库SQL Server2005时,在系统检测这一步计算机报了一个错误,提示“性能监视器计数要求(错误)”,使得安装无法继续进行,于是在网上找了些方法来解决,其中有一个方法最有效,在这 ...
- ASP多行多列又一个方法
<table border=1 width="200"> <% col=4 '列数 i=1 Do While i<=100 If i Mod col=1 T ...