檬味博客 » 问答 » 怎样用css写圆角代码

怎样用css写圆角代码

无图片的圆角框,复制以下代码，储存为“border.html”直接运行即可。 无标题文档 {padding:0;margin:0;} .container {width:50%;margin:10px auto;} .holder...
怎样用css写圆角代码
无图片的圆角框,复制以下代码，储存为“border.html”直接运行即可。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
*{padding:0;margin:0;}
.container {width:50%;margin:10px auto;}
.holder2 {color:#000;}
/*无图片的圆角框*/
.b1 {height:1px; font-size:1px; overflow:hidden; display:block; background:#aaa; margin:0 5px;}
.b2 {height:1px; font-size:1px; overflow:hidden; display:block; background:#fff; border-right:2px solid #aaa; border-left:2px solid #aaa; margin:0 3px;}
.b3 {height:1px; font-size:1px; overflow:hidden; display:block; background:#fff; border-right:1px solid #aaa; border-left:1px solid #aaa; margin:0 2px;}
.b4 {height:2px; font-size:1px; overflow:hidden; display:block; background:#fff; border-right:1px solid #aaa; border-left:1px solid #aaa; margin:0 1px;}
.content {border-right:1px solid #aaa; height:200px;border-left:1px solid #aaa;}
</style>
</head>
<body>
<div class="container">
<div class="holder">
<b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b>
<div class="content">
<p>CSS的圆角框</p>
</div>
<b class="b4"></b><b class="b3"></b><b class="b2"></b><b class="b1"></b>
</div>
</div>
</body>
</html>2010-05-07
使用css中的border-radius;
举例
css：
<style>
div.circle{border-radius:5px;}/*设置class为circle的div的为5个像素的圆角；
</style>
html:
<div class="circle"></div>
2015-10-14
-moz-border-radius:10px;
-webkit-border-radius:10px;

以上是css3实现圆角(在网上搜索一下"css3 圆角" 就会出来很多)

下面是不用css3实现的圆角.(因为ie浏览器不支持css3)
http://www.jimzhan.com/blog/archives/25752010-05-02
那个好像是 css 3.0 代码
自己去下一个 手册 就全有了2010-05-01
mengvlog 阅读 9 次 更新于 2025-07-20 18:08:10 我来答关注问题0
4 个回答檬味博客专题活动
  • 翡希信息咨询 css怎么让一个边框变成圆角的

    在CSS中，可以使用borderradius属性让一个边框变成圆角。以下是具体说明：基本用法：borderradius属性允许你设置元素边框的圆角半径。语法：borderradius: 值;，其中“值”可以是长度单位或百分比。四个值的情况：当提供四个值时，它们分别对应边框的左上角、右上角、右下角和左下角的圆角半径。例如：borde...

  • 深空游戏 css 代码 :div圆角矩形怎么写?

    首先看CSS部分：div#nifty{margin:0;background:#9BD1FA} 这段代码定义了一个ID为nifty的div元素，设置了边距为0，背景色为#9BD1FA，这是一种亮蓝色。接着是内容部分：div#nifty里面嵌套了几个div，每个div都设置了不同的样式，以便生成圆角效果。例如：div.rtop {display:block;background:#fff...

  • 文暄生活科普 css实现 圆角的 几种方法

    在CSS中，实现圆角的方法有多种，每种方法都有其适用的场景和灵活性。首先，最直接的方式是通过书写简单的CSS代码，例如设置`border-radius`属性，如`border-radius: 4px;`。如果你想对角线圆度有所不同，可以分别指定每个角的半径，如`border-radius: 4px 4px 3px 3px`，顺序为左上、右上、右下...

  • 武汉誉祥科技 css圆角边框怎么设置

    1.我们新建一个html网页文件，把他命名为test.html，接下来我们用test.html文件来讲解css如何设置圆角边框。2.在test.html文件内，要使用div标签创建一行文字，并且把文字内容写上“css如何设置圆角边框”。3.给div标签加上一个样式，设置div标签的class属性为mybkkd。4.编写css样式style type=text/css...

  • 校企律说法 divcss圆角边框怎么设置

    设置圆角边框的步骤相对简单。首先，确保你的div元素有一个明确的class或id，然后在CSS样式表中为这个元素指定border-radius属性。例如：css .myDiv { border: 2px solid #333; /* 设置边框宽度、样式和颜色 */ border-radius: 10px; /* 设置边框圆角程度 */ } 以上代码会给class为myDiv的div...

其他CSS类似问题

檬味博客在线解答立即免费咨询

CSS相关话题

Copyright © 2023 WWW.MENGVLOG.COM - 檬味博客
返回顶部