一个div的圆角例子

最新推荐文章于 2021-06-14 13:51:27 发布
最新推荐文章于 2021-06-14 13:51:27 发布
阅读量80 收藏
点赞数
分类专栏： Html 文章标签： XHTML HTML
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wwwww222221/article/details/83815186
版权

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>

<body>


<div id="tx_father" style="width:300px; height:200px; z-index:80;">

<div style="margin:0 4px; background:#B0BEC7; height:1px; overflow:hidden;"></div>
<div style="margin:0 2px; border:1px solid #B0BEC7; border-width:0 2px; background:#E1E7E9; height:1px; overflow:hidden;"></div>
<div style="margin:0 1px; border:1px solid #B0BEC7; border-width:0 1px; background:#E1E7E9; height:1px; overflow:hidden;"></div>
<div style="margin:0 1px; border:1px solid #B0BEC7; border-width:0 1px; background:#E1E7E9; height:1px; overflow:hidden;"></div>
<div style="background:#E1E7E9; border:1px solid #B0BEC7; border-width:0 1px;">
 <div style="font-size:12px; font-weight:bolder; font-family:Verdana; color:#258; padding:2px 10px 5px;">
  <!--标题，这里想要换背景色，就在这个div的style中增加background-color属性，换了之后需要设定一下宽度，不然很丑 -->
 </div>
 <div style="background:#FFF; margin:0 3px; font-size:11px; font-family:Verdana; color:#333; padding:5px 10px; overflow:hidden;">
  这是内容区域，背景色为白色，如果想要跟标题那一样，就把background的颜色改为#E1E7E9，也就是跟第2个div的background颜色一样


 </div>
</div>
<div style="margin:0 1px; border:1px solid #B0BEC7; border-width:0 1px; background:#E1E7E9; height:1px; overflow:hidden;"></div>
<div style="margin:0 1px; border:1px solid #B0BEC7; border-width:0 2px; background:#E1E7E9; height:1px; overflow:hidden;"></div>
<div style="margin:0 2px; border:1px solid #B0BEC7; border-width:0 2px; background:#E1E7E9; height:1px; overflow:hidden;"></div>
<div style="margin:0 4px; background:#B0BEC7; height:1px; overflow:hidden;"></div>


</div>


</body>
</html>

wwwww222221
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML设置单边圆角,如何在html中做圆角矩形和 只有右边的"分隔线"
weixin_36457551的博客
07-07 2051
其实是对(理论上是对所有的)html元素: 而实际 常用的是 div块, 链接a 等运用圆角矩形的样式这个圆角是通过元素: div, a的 css 样式来实现的:样式: border-radius/ border-top-left-radius左上/..../可以分别设置不同的, 也可以是一样的radius是半径, 如果radius等于div 边长的一半, 就是圆一般: 先设置整体的border,...
div css圆角代码各种圆角表格_圆角边框css圆角
11-11
例如，如果我们希望一个 `div` 元素的所有边角都是 10px 的圆角，可以这样编写 CSS： ```css div { border-radius: 10px; } ``` 若要为不同角设置不同圆角半径，可以分别指定： ```css div { border-top-left-...
html div怎么设置圆角,jquery设置div圆角
weixin_39966922的博客
06-14 2760
要设置DIV的圆角，最简单的办法莫过于使用CSS3配合HTML5，如果加上jquery，那么就更加灵活了，下面我们看几个例子。首先看看下面的这个图，下面的有编号内容的这个DIV，正是圆角的DIV，要实现起来实在太简单了。如果要实现上面的这个DIV的圆角，使用下面的一行代码即可。$("#DIV的ID号").css("border-radius","9px");注意，这是jquery的代码。其中，bo...
CSS3如何实现DIV圆角边框
热门推荐
weixin_46388225的博客
02-23 1万+
#CSS3如何实现DIV圆角边框 在进行页面布局时，DIV边框默认是矩形边框，想让边框为圆角时，可以用CSS3的border-radius这一属性来实现。 例如：想让div盒子边框四个角都为半径为10px的圆角时具体代码如下： 效果图： 下面对border-radius具体细节进行介绍： 语法：border-radius: 1-4 length|% / 1-4 length|%; 注释：按此顺...
html5-div圆角的例子
SalmonellaVaccine的专栏
10-13 1907
http://blog.csdn.net/liqi___123/article/details/5814025 页面中圆角的实现是个很头疼的问题，虽然现在有很多种实现方法，但是都是比较麻烦的。在本文中，让我们看看如何使用CSS3 border-radius来实现圆角DIV。 跨浏览器兼容性 就像在上一篇《CSS3教程：简介》中提到的，并不是所有的浏览器支持CSS3，但是那些比
CSS3利用一个div实现内圆角边框效果
weixin_30256505的博客
06-06 194
*首先要清楚的是，box-shadow的形状会随着border-radius变化。下面的例子可以证明： <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <s...
CSS圆角DIV
Blog@wp
09-06 579
border-radius 属性是一个简写属性，用于设置四个 border-*-radius 属性。 提示：该属性允许您为元素添加圆角边框！ 语法 border-radius: 1-4 length|% / 1-4 length|%; 注释：按此顺序设置每个 radii 的四个值。如果省略 bottom-left，则与 top-right 相同。如果省略 botto
CSS3实现DIV圆角完整代码
liudanyang_21的博客
07-12 235
本实例是CSS3实现DIV圆角。实现圆角的CSS3代码句是： "border-radius: 20px;" 。需使用支持CSS3的浏览器运行,例如新版的Chrome、火狐，或者IE9以上。IE6、7、8不支持。 在线预览效果：http://hovertree.com/texiao/css/4.htm 画圆型的例子：http://hovertree.com/h/bjae/css3circle.htm 实际应用：http://hovertree.com/texiao/jquerytree/3/ 测试:http:
div样式处理。圆角样式。
jerayc的专栏
02-17 2241
具有圆角效果： .mainDiv{ border-radius:8px;border:1px solid #BBFFFF; margin:auto; -webkit-border-radius: 8px; -moz-border-radius: 8px; } 下面是具有各种阴影效果的例子。 div¿ꔲ½ǼԒ�/title> #main{     w
CSS3实现DIV圆角效果完整代码
12-13
总结来说，这个例子向我们展示了如何利用CSS3的`border-radius`属性来创建一个带有圆角的`<div>`元素。通过改变`border-radius`的值，我们可以调整圆角的大小，从而定制不同的圆角效果。在实际的网页设计中，这种...
JS封装DIV圆角Css样式
06-08
以下是一个简单的例子，展示如何用JS动态设置圆角： ```javascript // 获取HTML中的某个div元素 var myDiv = document.getElementById('myDiv'); // 设置圆角半径 myDiv.style.borderRadius = '20px'; ``` 在提供...
DIV圆角代码
07-25
"DIV圆角"就是这样一个技术，它利用CSS（层叠样式表）来改变HTML中的<div>元素的边角形状，使其变得圆润。这个主题的压缩包文件名为“CSS圆角.html”，很显然，它包含了一个关于如何使用CSS实现DIV圆角的示例或教程...
jquery 圆角例子
03-31
"jQuery圆角例子"是一个很好的教学资源，它演示了如何使用jQuery插件轻松地为元素添加圆角。 **jQuery与CSS3的圆角** 在CSS3中，`border-radius`属性允许开发者直接在CSS中定义元素的圆角，无需额外的图片或...
DIV+CSS圆角边框
行路中
09-27 701
注：在网上找了一些圆角边框的例子，发现有篇bolg的例子很不错，分享之。 简洁型css圆角：  方法1： code1: .b1,.b2,.b3,.b4,.b1b,.b2b,.b3b,.b4b,.b{}{display:block;overflow:hidden;} .b1,.b2,.b3,.b1b,.b2b,.b3b{}{height:1px;} .b2,.b3
my share source
最新发布
08-15
my share source
毕业设计asp.net学生评教系统-qkrp源码含文档工具包
08-15
毕业设计asp.net学生评教系统-qkrp源码含文档工具包 asp.net，数据库sqlserver，开发工具用Microsoft Visual Studio 管理员登录 学生管理 添加 管理 教师管理 添加 管理 学院管理员 添加 管理 教务管理 得分统计 考核统计 意见汇总 包含：源码、数据库脚本、论文、环境工具包（在说明文档中）
Autologging-0.4.0-py2.py3-none-any.whl.zip
08-15
Autologging-0.4.0-py2.py3-none-any.whl.zip
写一个梯形盒子,底下是外凹圆角
06-10
好的，以下是一个梯形盒子的HTML和CSS代码，底下是外凹圆角： ...<div class="trapezoid"></...与上一个例子相比，只有`.trapezoid::before`中的`box-shadow`属性不同，这里使用了正常的阴影效果，产生了外凹圆角的效果。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值