不使用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: ...
随机推荐
- 详解Android Handler的使用
我们进行Android开发时,Handler可以说是使用非常频繁的一个概念,它的用处不言而喻.本文就详细介绍Handler的基本概念和用法. Handler的基本概念 Handler主 ...
- Tomcat 集群
1. 前言 该篇中测试的机器发生了变更,在第一篇中设置的Apache DocumentRoot "d:/deployment"修改为了DocumentRoot d:/clust ...
- kernel debuging
http://blog.csdn.net/XscKernel/article/category/1276234
- PAT 1005
1005. Spell It Right (20) Given a non-negative integer N, your task is to compute the sum of all the ...
- C#_约束 实现可排序单链表
using System; using System.Collections.Generic; using System.Linq; using System.Text; /* 使用 约束 实现可排序 ...
- 网页js生成当前年月日 星期
只需将下面代码插入需要显示日期的地方即可 <div style="color: brown; font-size: 10px;">今天是: <script lan ...
- Android Sutido 编译速度优化
虽然Android Studio 此时已经更新到了Android Studio 2.1版本,build 版本android-studio-bundle-143.2739321.但是在安装该版本都是根据 ...
- Android_Dialog
layout.xml <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xml ...
- Objective-C /iphone开发基础:协议(protocol)
protocol协议时为了补充Objective-C 只能单继承的缺陷而增加的一个新功能.Objective-C重所有的方法都是虚方法,所以在oc重也就没有关键字 virtual一说,有了协议可以补充 ...
- Linux与windows文件乱码问题
Linux与windows文件乱码问题 */--> Linux与windows文件乱码问题 Table of Contents 1. 简介 2. iconv详解 2.1. iconv –help ...