zoukankan
html css js c++ java
div圆角边框
DIV+CSS圆角边框
简洁型css圆角:
方法1:
简洁型css圆角矩形
code1:
<
style
type
="text/css"
>
.b1,.b2,.b3,.b4,.b1b,.b2b,.b3b,.b4b,.b
{
display
:
block
;
overflow
:
hidden
;
}
.b1,.b2,.b3,.b1b,.b2b,.b3b
{
height
:
1px
;
}
.b2,.b3,.b4,.b2b,.b3b,.b4b,.b
{
border-left
:
1px solid #999
;
border-right
:
1px solid #999
;
}
.b1,.b1b
{
margin
:
0 5px
;
background
:
#999
;
}
.b2,.b2b
{
margin
:
0 3px
;
border-width
:
2px
;
}
.b3,.b3b
{
margin
:
0 2px
;
}
.b4,.b4b
{
height
:
2px
;
margin
:
0 1px
;
}
.d1
{
background
:
#F7F8F9
;
}
.k
{
height
:
300px
;
}
</
style
>
</
head
>
<
body
>
<
div
>
<
b
class
="b1"
></
b
><
b
class
="b2 d1"
></
b
><
b
class
="b3 d1"
></
b
><
b
class
="b4 d1"
></
b
>
<
div
class
="b d1 k"
>
<
font
style
="font-size:26px;color:red; margin:0px 10px;"
>
简洁型css圆角矩形
</
font
>
</
div
>
<
b
class
="b4b d1"
></
b
><
b
class
="b3b d1"
></
b
><
b
class
="b2b d1"
></
b
><
b
class
="b1b"
></
b
>
</
div
>
方法2:
无图片实现圆角框
code2:
<
style
type
="text/css"
>
div.RoundedCorner
{
background
:
#9BD1FA
;
width
:
400px
;
}
b.rtop, b.rbottom
{
display
:
block
;
background
:
#FFF
}
b.rtop b, b.rbottom b
{
display
:
block
;
height
:
1px
;
overflow
:
hidden
;
background
:
#9BD1FA
}
b.r1
{
margin
:
0 5px
}
b.r2
{
margin
:
0 3px
}
b.r3
{
margin
:
0 2px
}
b.rtop b.r4, b.rbottom b.r4
{
margin
:
0 1px
;
height
:
2px
}
</
style
>
<
div
class
="RoundedCorner"
>
<
b
class
="rtop"
><
b
class
="r1"
></
b
><
b
class
="r2"
></
b
><
b
class
="r3"
></
b
><
b
class
="r4"
></
b
></
b
>
<
br
>
无图片实现圆角框
<
br
><
br
>
<
b
class
="rbottom"
><
b
class
="r4"
></
b
><
b
class
="r3"
></
b
><
b
class
="r2"
></
b
><
b
class
="r1"
></
b
></
b
>
</
div
>
3D圆角矩形:
3D圆角矩形
CODE:
<
style
type
="text/css"
>
.raised
{
background
:
transparent
;
width
:
40%
;
}
.raised h1,.raised p
{
margin
:
0 10px
;
}
.raised h1
{
font-size
:
2em
;
color
:
#fff
;
}
.raised p
{
padding-bottom
:
0.5em
;
}
.raised .b1,.raised .b2,.raised .b3,.raised .b4,.raised .b1b,.raised .b2b,.raised .b3b,.raised .b4b
{
display
:
block
;
overflow
:
hidden
;
font-size
:
1px
;
}
.raised .b1,.raised .b2,.raised .b3,.raised .b1b,.raised .b2b,.raised .b3b
{
height
:
1px
;
}
.raised .b2
{
background
:
#ccc
;
border-left
:
1px solid #fff
;
border-right
:
1px solid #eee
;
}
.raised .b3
{
background
:
#ccc
;
border-left
:
1px solid #fff
;
border-right
:
1px solid #ddd
;
}
.raised .b4
{
background
:
#ccc
;
border-left
:
1px solid #fff
;
border-right
:
1px solid #aaa
;
}
.raised .b4b
{
background
:
#ccc
;
border-left
:
1px solid #eee
;
border-right
:
1px solid #999
;
}
.raised .b3b
{
background
:
#ccc
;
border-left
:
1px solid #ddd
;
border-right
:
1px solid #999
;
}
.raised .b2b
{
background
:
#ccc
;
border-left
:
1px solid #aaa
;
border-right
:
1px solid #999
;
}
.raised .b1
{
margin
:
0 5px
;
background
:
#fff
;
}
.raised .b2, .raised .b2b
{
margin
:
0 3px
;
border-width
:
0 2px
;
}
.raised .b3, .raised .b3b
{
margin
:
0 2px
;
}
.raised .b4, .raised .b4b
{
height
:
2px
;
margin
:
0 1px
;
}
.raised .b1b
{
margin
:
0 5px
;
background
:
#999
;
}
.raised .boxcontent
{
display
:
block
;
background
:
#ccc
;
border-left
:
1px solid #fff
;
border-right
:
1px solid #999
;
}
</
style
>
</
head
>
<
body
>
<
div
class
="raised"
>
<
b
class
="b1"
></
b
><
b
class
="b2"
></
b
><
b
class
="b3"
></
b
><
b
class
="b4"
></
b
>
<
div
class
="boxcontent"
>
<
h1
>
3D圆角矩形
</
h1
>
</
div
>
<
b
class
="b4b"
></
b
><
b
class
="b3b"
></
b
><
b
class
="b2b"
></
b
><
b
class
="b1b"
></
b
>
</
div
>
反向css圆角矩形:
反向css圆角矩形
CODE:
<
style
type
="text/css"
>
.serif
{
background
:
transparent
;
width
:
40%
;
}
.serif h1, .serif p
{
margin
:
0 10px
;
}
.serif h1
{
font-size
:
2em
;
color
:
#fff
;
}
.serif p
{
padding-bottom
:
0.5em
;
}
.serif .b1, .serif .b2, .serif .b3, .serif .b4
{
display
:
block
;
overflow
:
hidden
;
font-size
:
1px
;
}
.serif .b1, .serif .b2, .serif .b3
{
height
:
1px
;
}
.serif .b2, .serif .b3
{
background
:
#fc0
;
border-left
:
1px solid #fff
;
border-right
:
1px solid #fff
;
}
.serif .b4
{
background
:
#fc0
;
border-left
:
1px solid #fff
;
border-right
:
1px solid #fff
;
}
.serif .b1
{
margin
:
0
;
background
:
#fff
;
}
.serif .b2
{
margin
:
0 1px
;
border-width
:
0 2px
;
}
.serif .b3
{
margin
:
0 3px
;
}
.serif .b4
{
height
:
2px
;
margin
:
0 4px
;
}
.serif .boxcontent
{
display
:
block
;
background
:
#fc0
;
border-left
:
1px solid #fff
;
border-right
:
1px solid #fff
;
margin
:
0 5px
;
}
</
style
>
<
div
class
="serif"
>
<
b
class
="b1"
></
b
><
b
class
="b2"
></
b
><
b
class
="b3"
></
b
><
b
class
="b4"
></
b
>
<
div
class
="boxcontent"
>
<
h1
>
反向css圆角矩形
</
h1
>
</
div
>
<
b
class
="b4"
></
b
><
b
class
="b3"
></
b
><
b
class
="b2"
></
b
><
b
class
="b1"
></
b
>
</
div
>
略带菱形的css圆角:
略带菱形的css圆角矩形
CODE:
<
style
type
="text/css"
>
.curved
{
background
:
transparent
;
width
:
40%
;
}
.curved h1, .curved p
{
margin
:
0 10px
;
}
.curved h1
{
font-size
:
2em
;
color
:
#fff
;
}
.curved p
{
padding-bottom
:
0.5em
;
}
.curved .b1, .curved .b2, .curved .b3, .curved .b4
{
display
:
block
;
overflow
:
hidden
;
height
:
1px
;
font-size
:
1px
;
}
.curved .b2, .curved .b3, .curved .b4
{
background
:
#e0cea3
;
border-left
:
1px solid #fff
;
border-right
:
1px solid #fff
;
}
.curved .b1
{
margin
:
0 4px
;
background
:
#fff
;
}
.curved .b2
{
margin
:
0 4px
;
height
:
2px
;
}
.curved .b3
{
margin
:
0 3px
;
}
.curved .b4
{
margin
:
0
;
height
:
1px
;
border-width
:
0 3px 0 3px
;
}
.curved .boxcontent
{
display
:
block
;
background
:
#e0cea3
;
border
:
0 solid #fff
;
border-width
:
0 1px
;
}
</
style
>
<
div
class
="curved"
>
<
b
class
="b1"
></
b
><
b
class
="b2"
></
b
><
b
class
="b3"
></
b
><
b
class
="b4"
></
b
>
<
div
class
="boxcontent"
>
<
h1
>
略带菱形的css圆角矩形
</
h1
>
</
div
>
<
b
class
="b4"
></
b
><
b
class
="b3"
></
b
><
b
class
="b2"
></
b
><
b
class
="b1"
></
b
>
</
div
>
特殊CSS圆角:
特殊css圆角矩形
CODE:
<
style
type
="text/css"
>
.pillar
{
background
:
transparent
;
width
:
40%
;
}
.pillar h1, .pillar p
{
margin
:
0 10px
;
}
.pillar h1
{
font-size
:
2em
;
color
:
#fff
;
}
.pillar p
{
padding-bottom
:
0.5em
;
}
.pillar .b1, .pillar .b2, .pillar .b3, .pillar .b4
{
display
:
block
;
overflow
:
hidden
;
font-size
:
1px
;
}
.pillar .b1, .pillar .b2, .pillar .b4
{
height
:
1px
;
}
.pillar .b2, .pillar .b3
{
background
:
#d66
;
border-left
:
1px solid #fff
;
border-right
:
1px solid #fff
;
}
.pillar .b4
{
background
:
#d66
;
border-left
:
4px solid #fff
;
border-right
:
4px solid #fff
;
}
.pillar .b1
{
margin
:
0 2px
;
background
:
#fff
;
}
.pillar .b2
{
margin
:
0 1px
;
border-width
:
0 1px
;
}
.pillar .b3
{
height
:
2px
;
margin
:
0
;
}
.pillar .b4
{
margin
:
0 2px
;
}
.pillar .boxcontent
{
display
:
block
;
background
:
#d66
;
border-left
:
1px solid #fff
;
border-right
:
1px solid #fff
;
margin
:
0 5px
;
}
</
style
>
<
div
class
="pillar"
>
<
b
class
="b1"
></
b
><
b
class
="b2"
></
b
><
b
class
="b3"
></
b
><
b
class
="b2"
></
b
><
b
class
="b4"
></
b
>
<
div
class
="boxcontent"
>
<
h1
>
特殊css圆角矩形
</
h1
>
</
div
>
<
b
class
="b4"
></
b
><
b
class
="b2"
></
b
><
b
class
="b3"
></
b
><
b
class
="b2"
></
b
><
b
class
="b1"
></
b
>
</
div
>
查看全文
相关阅读:
我的利器
老树新芽——矩估计遇到神经网络
QuantLib 金融计算——数学工具之随机数发生器
《Implementing QuantLib》译后记
c# 大批量用户访问数据库报错
阿里云redis映射到阿里云服务器
C# 输出字符串到文本文件中
SQL Server 怎么在分页获取数据的同时获取到总记录数
C# 当前 .NET SDK 不支持将 .NET Core 2.1 设置为目标。请将 .NET Core 2.0 或更低版本设置为目标,或使用支持 .NET Core 2.1 的 .NET SDK 版本。
c# 项目之间循环引用vs弹窗提醒
原文地址:https://www.cnblogs.com/ljj4490/p/5784192.html
最新文章
shell之最常用的服务脚本
从无到有实现主从复制
Ubuntu安装QQ
Ubuntu安装谷歌浏览器
由浅入深掌握匿名类
完整逆波兰计算器(Java)
中缀表达式转换为后缀表达式(Java)
递归--迷宫问题(Java)
递归--八皇后问题(Java)
Java问题解决--java.lang.NoClassDefFoundError
热门文章
HTTP--Request详解
HTTP--协议详解
Servlet--实例
Servlet 简介
在 R 中估计 GARCH 参数存在的问题(基于 rugarch 包)
《Head First 设计模式》读书笔记
QuantLib 金融计算——随机过程之 Heston 过程
【转载】数学学习的心理——关于数学中的挫败的反思及若干启示
QuantLib 金融计算——随机过程之一般 Black Scholes 过程
QuantLib 金融计算——随机过程之概述
Copyright © 2011-2022 走看看