DIV+CSS圆角边框

最新推荐文章于 2024-05-03 14:55:36 发布
最新推荐文章于 2024-05-03 14:55:36 发布
阅读量641 收藏
点赞数
文章标签： css div class border

 

1

<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

 

 

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

 

 

 

3

 

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

 

 

 

4

 

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

 

 

PrecisionSoft
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
DIV+CSS 圆角边框
03-19
NULL 博文链接：https://javapub.iteye.com/blog/711781
css中 div圆角边框样式,DIV+CSS圆角边框 - 前端LOVER - 博客园
weixin_39678493的博客
08-04 699
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...
div盒子边框圆角_div+css用边框实现圆角矩形(多样式)
weixin_39983993的博客
12-22 873
简洁型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 s...
DIV+CSS基础教程笔记
sapphire7的博客
07-10 2263
缺点：1）显示样式和数据是绑定的在一起 2）布局的时候，灵活度不高 3）一个页面可能会有大量的元素，代码会冗余 4）增加带宽 5）搜索引擎不喜欢这样的布局优点：1）理解比较简单 2）不同的浏览器看到的效果一般是相同的 3）显示数据还是很好的 基本思想：数据和样式要分离 div元素是用来为HTML文档内大块的内容提供结构和背景的元素。 ......
div+css圆角边框的制作
09-28
div+css圆角边框的制作
div+css无图边框圆角实现思路及代码
01-19
css圆角效果</title> <meta http-equiv=”content-type” content=”text/html; charset=gb2312″> <style type=”text/css”> div.RoundedCorner{background: #9BD1FA} b.rtop, b.rbottom{...
div+css用边框实现圆角矩形(多样式)
09-25
css圆角卷起了一阵风波，只用css来做圆角矩形的技术很早就有了,但是在网页的设计过程中,我们通常用图片实现圆角矩形效果。现在网上很多关于无图片实现css圆角矩形的方法,虽说巧妙,但是代码冗长,难以做到简洁
有关CSS中排版常见问题（清除默认样式问题 + 元素居中问题 + 元素之间的空白问题 + 行内块的幽灵空白问题）
秋刀鱼不做梦的编程日常
05-01 930
有关CSS中排版常见问题（清除默认样式问题 + 元素居中问题 + 元素之间的空白问题 + 行内块的幽灵空白问题）
第二弹：走进CSS世界，学习记录
weixin_64638001的博客
04-29 812
当选择器包含多种选择器时，需要将多种选择器优先级相加然后进行比较。选择器的优先级不会超过它最大数量级，如果选择器优先级一样，则使用靠后的样式。子选择器：选择器1 > 选择器2 表示选择器1的子元素为选择器2(只有父子关系才可以)。相邻选择器：选择器1 + 选择器2 表示选择紧贴在选择器1之后的选择器2元素。兄弟选择器：选择器1 ~ 选择器2 表示选择器1后面的所有兄弟元素选择器2。包含选择器：选择器1 选择器2 表示选择器2被选择器1包含即可。组合选择器：选择器1,选择器2 多个选择器之间用逗号分隔。
CSS之显示覆盖内容（z-index）
qq_60624992的博客
04-27 803
我们有的时候，希望下方的内容能够显示到上方，达到类似于多个图层的效果，此时我们可以利用z-index这个属性。z-index属性值是用来设置元素的堆叠顺序(元素层级)。
CSS 伪类、伪元素的应用实例：电池充电、高能进度条
无解的菜鸟晖 的博客
04-30 955
本文通过 CSS 伪类、伪元素，结合动画 animation 和 Vue 动态样式属性（通过 CSS 变量）的写法，来实现电池充电、高能进度条的效果。 CSS 伪类是对当前元素下，处于某些特定状态时而添加特殊效果的样式（基于文档之外的抽象，所以叫伪类），不产生新元素，写法用单冒号（:）开头。 CSS 伪元素是对当前元素下，某些特殊部位应用样式，通过创建虚拟元素实现，一般与 content 属性一起使用（基于元素的抽象，所以叫伪元素），写法用双冒号（::）开头。CSS 变量 var() 用于插入自定义属性。
HTML_CSS学习：常用文本属性
最新发布
m0_74972727的博客
05-03 296
【代码】HTML_CSS学习：常用文本属性。
css代码的定位及浮动
2401_83693610的博客
04-28 434
上次，我们解除了css的内外边距、鼠标悬停及其练习。现在我们学习css元素练习和定位。
vue3中使用animate.css
四岁爱上了她的博客
04-28 253
main.js注册：import ‘animate.css/animate.min.css’注意：animate__animated 这个类名是固定的，然后后面再跟上一个动画的类名。注意：import ‘animate.css’ 不适合在vue3项目。引入：npm install animate.css --save。使用：class=“animate__animated 动画名称”
c3 笔记8 css排版技巧
weixin_63492023的博客
05-03 142
相关内容：边界、边框、位置（absolute、relative、static）、overflow、z-index、超链接、鼠标光标特效、……©《HTML5+CSS3+JavaScript网页设计》陈婉凌编，清華大学出版社。margin:上边界值 右边界值 下边界值 左边界值。
HTML_CSS学习：CSS的编写位置
m0_74972727的博客
05-01 263
【代码】HTML_CSS学习：CSS的编写位置。
【前端学习——css】css实现给背景的图片加模糊
Everglowwwwww的博客
04-28 182
我在制作自己的博客的时候，打算做个封面，封面用半透明颜色盖住了预览图，上面印上了文字，但背景图太乱了，所以打算给背景加模糊效果。
css圆角边框设置阴影
07-28
要在具有圆角边框的元素上设置阴影效果，你可以使用CSS的box-shadow属性。box-shadow属性允许你在元素周围创建一个或多个阴影效果。 以下是一个示例代码，展示了如何设置具有圆角边框的元素的阴影： ```css div { ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值