圆角CSS

最新推荐文章于 2024-09-24 11:22:03 发布
最新推荐文章于 2024-09-24 11:22:03 发布
阅读量1.6k 收藏
点赞数
分类专栏： 页面设计 文章标签： class div html border css table
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/puexine/article/details/1524010
版权

样式1：

<style type="text/css">
.r0 {font-size:12px;width:80%;}
.r1 {height:1px; font-size:1px; overflow:hidden; display:block; background:#000; margin:0 5px;}
.r2 {height:1px; font-size:1px; overflow:hidden; display:block; border-right:2px solid #000; border-left:2px solid #000; margin:0 3px;}
.r3 {height:1px; font-size:1px; overflow:hidden; display:block; border-right:1px solid #000; border-left:1px solid #000; margin:0 2px;}
.r4 {height:2px; font-size:1px; overflow:hidden; display:block; border-right:1px solid #000; border-left:1px solid #000; margin:0 1px;}
.r5 {border-right:1px solid #000; border-left:1px solid #000; padding:0px 5px 0px 5px;}
</style>
使用方法：
<div class="r0">
<div class="r1"></div>
<div class="r2"></div>
<div class="r3"></div>
<div class="r4"></div>
<div class="r5">
<div>内容区</div>
</div>
<div class="r4"></div>
<div class="r3"></div>
<div class="r2"></div>
<div class="r1"></div>
</div>

 样式2：

<html>
<head>
<title>3D圆角</title>
<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>
</body>
</html>

样式3：

<html>
<head>
<title>样式3</title>
<STYLE type=text/css>
/* Pillar type */
.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>
</head>
<body><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>样式3</h1>
</div>
<b class="b4"></b><b class="b2"></b><b class="b3"></b><b class="b2"></b><b class="b1"></b>
</div>
</body>
</html>

样式4：

<html>
<head>
<title>样式4</title>
<STYLE type=text/css>
/* flared serif */
.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>
</head>
<body><div class="serif">
<b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b>
<div class="boxcontent">
<h1>样式4</h1>
</div>
<b class="b4"></b><b class="b3"></b><b class="b2"></b><b class="b1"></b>
</div>
</body>
</html>

样式5：

<html>
<head>
<title>样式5</title>
<STYLE type=text/css>
/* Curved cutout Borders*/
.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>
</head>
<body>
<div class="curved">
<b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b>
<div class="boxcontent">
<h1>样式5</h1>
</div>
<b class="b4"></b><b class="b3"></b><b class="b2"></b><b class="b1"></b>
</div>
</body>
</html>

样式6：

<html>
<head>
<title>html圆角</title>
</head>
<body>
<TABLE cellSpacing=0 cellPadding=0 border=0>
<TBODY>
<TR>
<TD width=1></TD>
<TD width=1></TD>
<TD width=1></TD>
<TD width=274 bgColor=#999999></TD>
<TD width=1></TD>
<TD width=1></TD>
<TD width=1></TD>
</TR>
<TR>
<TD></TD>
<TD bgColor=#999999 colSpan=2></TD>
<TD bgColor=#f7f8f9></TD>
<TD bgColor=#999999 colSpan=2></TD>
<TD></TD>
</TR>
<TR>
<TD></TD>
<TD bgColor=#999999></TD>
<TD bgColor=#f7f8f9 colSpan=3></TD>
<TD bgColor=#999999></TD>
<TD></TD>
</TR>
<TR>
<TD width=1 bgColor=#999999></TD>
<TD height=60 bgColor=#f7f8f9 colSpan=5><font style="font-size:26px;color:red; margin:0px 10px;">html圆角</font></TD>
<TD width=1 bgColor=#999999></TD>
</TR>
<TR>
<TD></TD>
<TD bgColor=#999999></TD>
<TD bgColor=#f7f8f9 colSpan=3></TD>
<TD bgColor=#999999></TD>
<TD></TD>
</TR>
<TR>
<TD></TD>
<TD bgColor=#999999 colSpan=2></TD>
<TD bgColor=#f7f8f9></TD>
<TD bgColor=#999999 colSpan=2></TD>
<TD></TD>
</TR>
<TR>
<TD></TD>
<TD></TD>
<TD></TD>
<TD bgColor=#999999></TD>
<TD></TD>
<TD></TD>
<TD></TD>
</TR>
</TBODY>
</TABLE></body>
</html>

样式7：

<html>
<head>
<title>简写CSS圆角</title>
<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;}
</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">
<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>
</body>
</html>

puexine
关注
专栏目录
一款圆角CSS3动画线条边框代码
06-12
这款“圆角CSS3动画线条边框代码”正是利用了CSS3的强大特性，创建出一种独特且吸引人的视觉效果。下面我们将深入探讨这个主题，解析其背后的实现原理和相关知识点。 首先，圆角边框是通过CSS3的`border-radius`...
个性圆角CSS模板_个性 圆角 jquery 简单_html网站模板_网页源码移动端前端_H5模板_自适应响应式源码.rar
08-06
《构建个性圆角CSS模板：实现自适应响应式网页设计》 在当今互联网时代，网页设计不仅需要美观，更需要具备良好的用户体验和适应性。"个性圆角CSS模板_个性 圆角 jquery 简单_html网站模板_网页源码移动端前端_H5...
国家游泳中心-水立方 8页面 北京奥运会主游泳馆 HTML5+CSS3布局 ASP+ACCESS数据库 注册登录留言功能 搜索修改删除留言功能（增删查改）
qq_26341531的博客
03-02 155
国家游泳中心-水立方 8页面 北京奥运会主游泳馆 HTML5+CSS3布局 ASP+ACCESS数据库 注册登录留言功能 搜索修改删除留言功能（增删查改）
HTML CSS 网页设计作业：关于城市旅游的HTML网页设计 ——北京
01-05 877
网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；网页编辑方面。
table 能设圆角 css,巧用css代码打造圆角table
weixin_36245032的博客
08-04 894
我们都知道css是一种层叠样式表(英文全称:Cascading Style Sheets)，是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。那么今天就教大家一个小的技巧用css代码打造圆角table，当然也可以制造圆角div。效果如下图：CSS打造圆角...
CSS 圆角
six6de6的博客
07-18 1776
css圆角边框都给我学！！！！
上面2个圆角css,纯div+css2实现圆角
weixin_36413546的博客
08-04 449
之前一直实现圆角都是靠图片(自己知识还不够)，通过上网找资料学习，终于找到了纯div+css实现的圆角效果，兼容各种浏览器。String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+pat...
css设置圆角
weixin_69761220的博客
05-18 8711
用border-radius属性来设置圆角 可以写： 四个值：左上 右上 右下 左下 三个值：左上 右上左下 右下 两个值：左上右下 右上左下 一个值：共用 给单独一角设置圆角：border-xxx-xxx-radius 例如：左上角 border-top-left-radius div{ width: 100px; height: 100px; background-color: red...
前端必知必会-CSS圆角
qq_24018193的博客
08-29 1702
本文介绍了CSS圆角的使用，如有问题欢迎私信和评论。
好看的侧边栏选项卡圆角css
源码好优多
04-10 2508
先看效果图 没加圆角的侧边栏 加了圆角的侧边栏（好看多了） 实现步骤 步骤一先给每个选项卡右上角和右下角添加正方形div <view class="tabs-item" :class="[{'tabs-active': index === selectIndex}]"> <view :class="[{'corner top-corner': index === selectIndex}]"></view> <view :class="[{'corner
table 能设圆角 css,table&css圆角边框效果
weixin_33871933的博客
08-04 568
挺好用的放在最下面比较好看所以就一个下圆角的实例上圆角按照代码很容易做。。。图传不上来head区body{font:100.01% "Trebuchet MS",Verdana,Arial,sans-serif}h1,h2,p{margin: 0 10px}h1{font-size: 250%;color: #FFF}h2{font-size: 200%;color: #f0f0f0}p{...
圆角按钮css,基于CSS3的一组圆角按钮 - YangJunwei
weixin_28925387的博客
08-03 863
CSS3作为对CSS的升级，将原有的一些大模块分解为更小更易于表达的小模块，取得了相当的好评，也使得开发周期变短、过程变得愉快！今天分享一下自己使用的基于CSS3的一组圆角按钮，效果不错，但欢迎升级指正！这组圆角按钮，使用了CSS3的 border-radius 和 box-shadow 属性！先分享一下haibor对这两个属性的理解：Border Radius：边界半径，写法类似内边距(padd...
个性圆角CSS模板-个性 圆角 jquery 简单.rar
02-20
本资源"个性圆角CSS模板-个性 圆角 jquery 简单.rar"是一个专门针对网页设计的模板，它结合了CSS和jQuery技术，为用户提供了一种实现个性化的圆角效果的简单方案。 首先，让我们谈谈“圆角”。在早期的网页设计中，...
个性圆角CSS模板_个性 圆角 jquery 简单.zip
02-21
本资源"个性圆角CSS模板_个性 圆角 jquery 简单.zip"正是为了帮助开发者实现这样的效果，它包含了CSS和jQuery技术，让创建具有个性化的圆角元素变得轻松简单。 首先，我们要了解CSS（Cascading Style Sheets）在...
绿色圆角CSS3+html5博客模板_蓝色 css3 html5 博客 标准.zip
02-17
这个压缩包文件“绿色圆角CSS3+html5博客模板_蓝色 css3 html5 博客 标准.zip”显然包含了一个基于HTML5和CSS3技术的博客模板，设计风格为绿色圆角，且带有蓝色元素。这个模板是为那些希望创建独特、现代和响应式的...
html实现黑白棋
woshiyaozhenyang的博客
09-23 534
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>黑白棋</title> <style> body { display: flex; flex-direction: column; align-items: center;
web基础：域名、网页、HTML、web版本
shyuu的博客
09-23 1449
web（World Wide Web）即全球广域网，也称为万维网，它是一种基于超文本和HTTP的、全球性的、动态交互的、跨平台的分布式图形信息系统。是建立在Internet上的一种网络服务，为浏览者在Internet上查找和浏览信息提供了图形化的、易于访问的直观界面，其中的文档及超级链接将Internet上的信息节点组织成一个互为关联的网状结构。
HTML粉色烟花秀
兔子王
09-21 5768
HTML语言实现的粉红色跨年烟花秀的完整代码。
html TAB切换按钮变色、自动生成table--使用函数优化结构
最新发布
TrueLink的博客
09-24 804
<!DOCTYPE html> <head> <meta charset="UTF-8"> <title>Dynamic Tabs with Table Data</title> <style> /* 简单的样式 */ .tab-content { display: none; border: 1px solid #ccc; padding: 1px
el-radio-group 的圆角css
10-10
要设置 el-radio-group 的圆角样式，可以使用以下 CSS 属性： ```css .el-radio-group { border-radius: 4px; } ``` 这样会将 el-radio-group 的边框设置为圆角。你可以根据需要调整 `border-radius` 的值。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值