不使用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: 0;padding:0 10px;font-size: 12px;line-height: 24px;white-space: pre-wrap;
}

转载于:https://www.cnblogs.com/jimmiehwang/p/5391198.html

不使用border-radius，实现一个可复用的高度和宽度都自适应的圆角矩形相关推荐

如何使用CSS3 Border Radius属性
With CSS3, you can give any element "rounded corners" by using the border-radius property. ...
【Android 】零基础到飞升 | 构建一个可复用的自定义BaseAdapter
2.5.0 构建一个可复用的自定义BaseAdapter 本节引言: 如题,本节给大家带来的是构建一个可复用的自定义BaseAdapter,我们每每涉及到ListView GridView等其他的Ad ...
Android基础入门教程——2.4.7 构建一个可复用的自定义BaseAdapter
Android基础入门教程--2.4.7 构建一个可复用的自定义BaseAdapter 标签(空格分隔): Android基础入门教程本节引言: 如题,本节给大家带来的是构建一个可复用的自定义Bas ...
Android入门教程四十之构建一个可复用的自定义BaseAdapter
如题,本节给大家带来的是构建一个可复用的自定义BaseAdapter,我们每每涉及到ListView GridView等其他的Adapter控件,都需要自己另外写一个BaseAdapter类,这样显得 ...
uniapp 制作一个可复用的segmented-control（tab选项卡）
uniapp 制作一个可复用的segmented-control(tab选项卡) 开局一张图,内容全靠编 1.开局一张图(先上效果图) 2.内容全靠编开始编写复用组件: segmented-con ...
设计所需的各种输出格式（包括整数、实数、字符串等），用一个文件名format.h把这些信息都包括到此文件内，另编写一个文件，用文件包含命令验证可以使用这些格式
<程序设计基础-c语言>杨莉刘鸿翔 ISBN-978-7-03-032903-5 p241 习题7 16.设计所需的各种输出格式(包括整数.实数.字符串等),用一个文件名"fo ...
一个球从100m高度自由落下,第10次反弹多高
.一个球从100m高度自由落下,每次落地后反跳回原来高度的一半,再落下,再反弹.求它在第10次落地时,共经过多少米?第10次反弹多高 float h = 100;//初始高度 // //反弹 ...
Android 实现TextView后面跟随一个高度和宽度固定的ImageView
安卓实现TextView后面跟随一个高度和宽度固定的ImageView(不要问我为什么不直接用drawableRight,因为宽高不好控制)TextView只为1行,即singleLine为true, ...
MODE —— 输出一个高度和宽度固定的方框（知识点：for循环嵌套for循环）
问题描述: 终端输入,需要的图形的高度和宽度,绘制图形. 运行结果: 代码部分: #include <stdio.h> int main() {unsigned int width = 0 ...

不使用border-radius，实现一个可复用的高度和宽度都自适应的圆角矩形

不使用border-radius，实现一个可复用的高度和宽度都自适应的圆角矩形相关推荐

最新文章

热门文章