css3.0:border-radius 圆角边框

最新推荐文章于 2022-11-16 21:08:12 发布
最新推荐文章于 2022-11-16 21:08:12 发布
阅读量494 收藏
点赞数
分类专栏： .NET

css3.0:border-radius 圆角边框

        在css3.0中，又添加了一个新的属性border-radius，使用border-radius这个属性可以实现圆角边框的效果。除IE和遨游外，目前有Firefox ，Safari，Chrome，Opera支持该属性，其Safari，Chrome，Opera是支持最好的，依照了w3c的标准，仅仅使用border-radius，就可以实现效果，无需加入前缀-webkit。而火狐依然需要加上前缀-moz。
即：
Firefox支持border-radius(圆角)：-moz-border-radius:10px;

webkit内核的Safari和Chrome支持border-radius(圆角)：-webkit-border-radius:10px;

Opera支持border-radius(圆角)：border-radius:10px;

IE不支持border-radius(圆角)

效果图：（IE和遨游不支持！）



代码：
<!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>圆角效果border-radius</title>
<style type="text/css">
body,div{margin:0;padding:0;}
.border{width:200px;border:10px solid gray;height:20px;
-moz-border-radius:10px;/*仅Firefox支持，实现圆角效果*/
-webkit-border-radius:10px;/*仅Safari,Chrome支持，实现圆角效果*/
-khtml-border-radius:10px;/*仅Safari,Chrome支持，实现圆角效果*/
border-radius:10px;/*仅Opera，Safari,Chrome支持，实现圆角效果*/
}
</style>
</head>
<body>
<div class="border">border radius</div>
</body>
</html>



再此我们还可以随意指定圆角的位置，上左，上右，下左，下右四个方向。
在firefox、webkit内核的Safari，Chrome和 Opera的具体书写格式如下：

上左效果：

-moz-border-radius-topleft / -webkit-border-top-left-radius / border-top-left-radius   上左



上右效果：

-moz-border-radius-topright / -webkit-border-top-right-radius / border-top-right-radius 上右


下左效果：

-moz-border-radius-bottomleft / -webkit-border-bottom-left-radius / border-bottom-left-radius 下左


下右效果：

-moz-border-radius-bottomright / -webkit-border-bottom-right-radius /border-bottom-right-radius  下右




然后我们可以做些效果：
例如常见的 标题栏 仅仅需要在上面用到圆角效果，如图：

代码 ：
<!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>圆角效果border-radius</title>
<style type="text/css">
.border{width:120px;border:15px solid gray;height:20px;
background:gray;color:#fff;
-moz-border-radius-topright:15px;
-moz-border-radius-topleft:15px;
-webkit-border-top-right-radius:15px;
-webkit-border-top-left-radius:15px;
border-top-right-radius:15px;
border-top-left-radius:15px;
}
</style>
</head>
<body>
<div class="border">border radius</div>
</body>
</html>


代码：
<!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>圆角效果border-radius</title>
<style type="text/css">
.border{width:120px;border:15px solid gray;height:20px;
background:gray;color:#fff;
-moz-border-radius-topright:15px;
-moz-border-radius-bottomleft:15px;
-webkit-border-top-right-radius:15px;
-webkit-border-bottom-left-radius:15px;
border-top-right-radius:15px;
border-bottom-left-radius:15px;
}
</style>
</head>
<body>
<div class="border">border radius</div>
</body>
</html>



万变不离其宗，仅仅需要改下的border-radius的方向，就可以实现一些很有用的效果，代码变的越来越简单。

努力成为好爸爸
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS3中border-radius属性设定圆角的使用技巧
01-21
border-radius CSS3中的代表——第一个在社区中得到广泛使用新属性。这意味着，除去Internet ...然而，今天我们不关心前缀，只简单坚持官方形式：border-radius。 如你所料，我们可以为每个角指定不同的值。 CSS C
vue设置圆角半径
xyyyss的博客
10-13 2802
注意，如果你设置了圆角半径还去设置图片的padding和margin会挤压照片使圆角半径变形，会变成矩形。当你想要一个矩形图片能够设置成圆角矩形的时候不需要去修改图片，只需要在style中设置样式即可。只需要在样式里加border-radius：；即可，它一起控制了四个角的圆角半径。这个是单个圆角半径的代码。
边框样式（border-style）、边框圆角（border-radius）以及媒体查询（@media）
热门推荐
下雨打伞干嘛的博客
11-10 1万+
边框样式（border-style）: border-style属性可以控制边框的视觉样式，包含8种可用边框样式。 使用方法： p { border-style: groove; } 8种样式： solid： 实线边框，经典边框。 double： 双线边框，含有两条线。 groove： 槽线边框，看起来就像页面中的一个槽。 outset： 外凸边框，看起来就像从页面凸出来一样。 dotted： 虚线（点线）边框。 dashed： 破折线边框。 inset： 内凹边框，看起来像页面凹进去一样。 ridge
CSS学习13之圆角边框及阴影
ZXS1002的博客
02-16 1621
回顾 盒子模型 盒子模型它的学名为框模型！但是我觉得叫它盒子模型更加贴切，方便理解！ CSS 框模型 所有 HTML 元素都可以视为方框。在 CSS 中，在谈论设计和布局时，会使用术语“盒模型”或“框模型”。 CSS 框模型实质上是一个包围每个 HTML 元素的框。它包括：外边距、边框、内边距以及实际的内容。 圆角边框示例 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"&
圆角边框***
weixin_47481102的博客
05-12 2053
在css3中，新增了圆角边框样式，这样盒子就可以变圆角了。 border-radius属性用于设置元素的外边框圆角。 语法： border-radius：length； radius半径（圆的半径）原理：（椭）圆与边框的交集形成圆角效果 以上为圆角边框原理 参数值可以为数值或百分比的形式 如果是正方形，想要设置为一个圆，把数值修改为高度或者宽度的一半即可，或者直接写为50% 如果是一个矩形，设置为高度的一半就可以做 该属性是一个简写属性，可以跟四个值，分别代表左上角、右上角、右下.
如何设置边框圆角
weixin_65607135的博客
08-04 5078
border-top-left-radius 设置左上角的弧度。borde-top-right-radius 设置右上角的弧度。border-bottom-left-radius 设置左小角的弧度。border-bottom-right-radius 设置右下角的弧度。它的效果图是是一个宽200px 高100px 背景颜色是青色的的一个矩形。顺序是（左上=右下）（右上=左下 ）例如我们设置上面的矩形右上角的弧度。顺序是 左上 右上 右下 左下。...
实现CSS3中的border-radius(边框圆角)示例代码
12-11
实现边框圆角 -moz-border-radius: 32px; -webkit-border-radius: 32px; border-radius: 32px; behavior: url(border-radius.htc); 复制代码代码如下: <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//...
CSS3的Border-radius轻松制作圆角
01-19
前面系统总结了CSS3中Gradient和RGBA的用法，今天我们在一起来看看CSS3中制作圆角的属性border-radius的具体用法。在CSS2中，大家都碰到过圆角的制作。当时，对于圆角的制作，我们都需要使用多张圆角图片做为背景，...
CSS3使用border-radius属性制作圆角
09-25
主要介绍了CSS3使用border-radius属性制作圆角，并附上示例代码，推荐给有相同需求的小伙伴。
css3(border-radius)边框圆角详解
11-18
border-radius 圆角边框(CSS3.0)
lks2012的专栏
04-13 447
在css3.0中，又添加了一个新的属性border-radius，使用border-radius这个属性可以实现圆角边框的效果。除IE和遨游外，目前有Firefox ，Safari，Chrome，Opera支持该属性，其Safari，Chrome，Opera是支持最好的，依照了w3c的标准，仅仅使用border-radius，就可以实现效果，无需加入前缀-webkit。而火狐依然需要加上前缀-mo
vue3 获取焦点时修改el-input的border-radius的属性
booo_ooom的博客
11-16 1445
vue3 获取焦点时修改el-input的border-radius的属性
html圆角边框
weixin_44733860的博客
06-09 4921
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>圆角
CSS - 盒子边框（border）、圆角边框(CSS3)
weixin_42235173的博客
06-06 2921
盒子边框（border） 边框就是那层皮。 橘子皮。。柚子皮。。橙子皮。。。 语法： border : border-width || border-style || border-color 边框属性—设置边框样式（border-style） 边框样式用于定义页面中边框的风格，常用属性值如下： none：没有边框即忽略所有边框的宽度（默认值） solid：边框为单实线(最为常用的) d...
关于如何用css使盒子的边框做成圆角的问题
Kobe_G的博客
11-17 1万+
要实现圆角的效果其实很简单，用一个radius属性就行了。话不多说，直接上代码： &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;style type="text/css"&gt;
解决圆角问题firefox chrome
Allen专栏
03-12 1693
.element {   -moz-border-radius: 10px;   -webkit-border-radius: 10px;   border-radius: 10px; /* future proofing */   }   .element-top-left-corner {   -moz-border-radius-topleft: 10px
对border-radius各浏览器的支持问题
Wu_Application的博客
09-17 7050
日常随记-2018年9月17日08:37:09 在css3中新添加了个样式，圆角边框border-radius，border-radius属性指定好圆角的半径； 在使用border-radius属性时，如果使用Firefox浏览器，需要将样式代码书写成”-webkit-border-radius”; 如果使用Opera浏览器，需要将样式代码书写成”border-radius”； 如果使用C...
纯CSS圆角边框——让IE一边站
碌人乘凉, 黎硕 --> Aerchi.com
03-31 72
如图，博客已经换上。 如标题，IE不支持。尽管如此，我也换上了，效果觉得好看多了。至于IE，随便吧，方框也不是很丑。 过去看过一些介绍纯代码打造CSS边框的文章，都比较麻烦。想要简单，那兼容性就不好，我不知道到底是IE难兼容FF，还是FF总不能兼容IE？总是对于页面设计，这是个很痛苦的问题。既然如此，为何不先让非IE用户体验上他们本应有的效果？更何况代码如此简单。 代码如下：...
border-radius:1px 2px 3px 4px的四个参数值代表的位置
今天也要加油呀！
04-06 2120
border-radius:左上，右上，右下，左下 <div class='demo'> </div> .demo { width: 200px; height: 200px; background: #FF9900; border-radius: 100px 0 0 0; }
border-radius: 50%;border-top-left-radius: 50%;border-top-right-radius: 50%;border-bottom-right-radius: 50%;border-bottom-left-radius:
最新发布
07-22
border-radius属性用于设置元素的圆角，而border-top-left-radius、border-top-right-radius、border-bottom-right-radius和border-bottom-left-radius属性用于分别设置元素的四个角的圆角半径。 当设置border-...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值