DIV+CSS圆角边框

简洁型css圆角：

方法1：

简洁型css圆角矩形

code1:

.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;}

简洁型css圆角矩形

方法2：

无图片实现圆角框

code2:

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}

无图片实现圆角框

3D圆角矩形:

3D圆角矩形

CODE:

.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;}

3D圆角矩形

反向css圆角矩形:

反向css圆角矩形

CODE:

.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;

}

反向css圆角矩形

略带菱形的css圆角:

略带菱形的css圆角矩形

CODE:

.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;

}

略带菱形的css圆角矩形

特殊CSS圆角：

特殊css圆角矩形

CODE：

.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;

}

特殊css圆角矩形

css中 div圆角边框样式,DIV+CSS圆角边框 - 前端LOVER - 博客园相关推荐

  1. Django中的Model（字段） - 第五轻柔的code - 博客园

    Django中的Model(字段) - 第五轻柔的code - 博客园 Django ORM 中的批量操作 - AlphaJx - 博客园

  2. Django中的Model（操作表） - 第五轻柔的code - 博客园

    Django中的Model(操作表) - 第五轻柔的code - 博客园

  3. dlibdotnet 人脸相似度源代码_使用dlib中的深度残差网络(ResNet)实现实时人脸识别 - supersayajin - 博客园...

    opencv中提供的基于haar特征级联进行人脸检测的方法效果非常不好,本文使用dlib中提供的人脸检测方法(使用HOG特征或卷积神经网方法),并使用提供的深度残差网络(ResNet)实现实时人脸识别 ...

  4. java判断类型_Java中类型判断的几种方式 - 码农小胖哥 - 博客园

    1. 前言 在Java这种强类型语言中类型转换.类型判断是经常遇到的.今天就细数一下Java中类型判断的方法方式. 2. instanceof instanceof是Java的一个运算符,用来判断一个 ...

  5. c 语言 json序列化,C#中json字符串的序列化和反序列化 – 万能的聪哥 – 博客园...

    今日写番茄闹钟程序,打算添加日程安排内容,使用到json格式文件的序列化和反序列化: 什么是Json ? Json[ 它是一个轻量级的数据交换格式,我们可以很简单的来读取和写它, 并且它很容易被计算机 ...

  6. android aar管理,【盗墓笔记】图解使用fat-aar方式在AndroidStudio中打包嵌套第三方aar的aar - 宋者为王 - 博客园...

    将一些项目中的一些独立功能打包成aar,不仅能于项目解耦,还能够提供给其它项目使用相同的功能,可谓是为项目开发带来了很大的便利.最近第一次做sdk,碰到一些问题,花了不少时间才解决,所以这里做一下简单 ...

  7. html h1转换为行内,css中转换为行内样式的解决方案(css-inline)

    聊聊场景 发送邮件 在第三方网站中嵌入HTML 从其他编辑器拷贝编辑好的文章发布到微信.今日头条等自媒体 在以上场景使用行内样式的兼容性要高很多,也可以保持原样式不变 解决方案 这两种方案功能和 Ap ...

  8. 如何使用jquery修改css中带有!important的样式属性

    <div class="test">使用jquery修改css中带有!important的样式属性</div> 外部样式为: div.test{width: ...

  9. webpack插件实现自动抽取css中的主题色样式，并动态切换主题色（element-ui）

    项目项目中用了element-ui,有切换主题色的需要.但官方的方式,有几个问题: 1.需要下载整个element-ui的样式css,并替换其中的css样式颜色.文件较大,下载慢且影响性能. 2.只能 ...

  10. CSS中border的所有样式属性

    CSS中border的所有样式属性 1.solid:实线 使用方法:border:solid 1px #000; 我发现border:1px solid #000;和border:solid 1px ...

最新文章

  1. java kryo_Kryo框架使用方法代码示例
  2. JAVA中float和double的区别、String和char的区别
  3. 吴恩达教你读论文：持续而缓慢的学习，才是正道
  4. elasticsearch(es)分布式全文检索引擎 简介
  5. 谈谈利用JavaScript结合相对单位rem实现自适应布局的简单而实用的方法
  6. SQLServer锁的机制
  7. 送书 | 耗时很长的程序忘加nohup就运行了怎么办？
  8. Hemberg-lab单细胞转录组数据分析（四）
  9. css的长度单位没有哪些,css 长度单位知多少
  10. 中国农用喷雾机市场趋势报告、技术动态创新及市场预测
  11. 浅谈今日头条关键词下拉词框优化推广的优势
  12. Windows移动热点服务
  13. 【96】太空射击游戏_笔记
  14. android 盒子 关闭电视,电视盒子正确使用方法，速速来取！
  15. Win11 22000.918(KB5016691)正式版发布，解决一系列问题！
  16. dreamweaver作业静态HTML网页设计模板 中国传统书法
  17. flex通过blazeds与java实现增删改查-整个实现流程
  18. 著名超导论文被Nature撤稿
  19. 子曾经曰过，我平生第一次讨厌下雨。
  20. c语言 乘法计算速度,C++ 基本计算的速度

热门文章

  1. 如何导出微信聊天记录
  2. python破解百度网盘提取码_Python 一键获取百度网盘提取码
  3. netty 百度网盘 密码
  4. python机器人编程——VREP数字孪生四轴机械臂联合仿真
  5. 解决VST插件无法加载之sam音架的配置
  6. 来了！Python 官方发布了整套的中文PDF 文档（共27本）
  7. python 官方中文文档（在线）
  8. Android 关于定位中的那点事（GPS,GPGGA,NMEA-0183,RTCM）
  9. laravel 判断字符串包含_Laravel：表单验证字符串长度的错误信息导致的异常
  10. HTML兼容IE版本问题