今天就跟大家聊聊有关css3中怎么实现圆角效果,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。语法和说明在CSS3中用来生成圆角效果的属性是borde
今天就跟大家聊聊有关css3中怎么实现圆角效果,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。
语法和说明
在CSS3中用来生成圆角效果的属性是border-radius.这个属性跟大家熟知的width等属性的用法相似:
代码如下:
.roundElement {
border-radius: 10px;
}
上面的这句代码的作用是设置一个元素的四个角的弧度半径值都为10px。你也可以对每个角单独指定:
代码如下:
.pearElement {
border-top-left-radius: 7px;
border-top-right-radius: 5px;
border-bottom-right-radius: 6px;
border-bottom-left-radius: 8px;
}
如果你觉得上面的写法太复杂,可以使用下面border-radius简写的方法:
代码如下:
.oddRoundElement {
border-radius: 12px 5px 12px 5px;
border-radius: 12px 5px;
}
四个值分别代表的是top-left, top-right, bottom-right, bottom-left四个角。
各浏览器对border-radius的支持
因为这种圆角技术是CSS3里出现的,老式浏览器或较早期的浏览器中用到这个属性时需要在CSS里添加浏览器引擎前缀(vendor prefixes)。会是{prefix}-border-radius这样一个样子,而具体各种浏览器引擎前缀是下面这样的写法:
代码如下:
-moz-border-radius: 20px;
-WEBkit-border-radius: 20px;
-o-border-radius: 20px;</p>
<p>
-moz-border-radius-topleft:15px;
-moz-border-radius-topright:50px;
-moz-border-radius-bottomleft:15px;
-moz-border-radius-bottomright:50px;
-moz-border-radius:10px 15px 15px 10px; </p>
<p>
-webkit-border-top-left-radius:15px;
-webkit-border-top-right-radius:50px;
-webkit-border-bottom-left-radius:15px;
-webkit-border-bottom-right-radius:50px;
基本上,你需要对每种浏览器引擎做各自的声明,加上这些讨厌的稍微不同的代码来保证完全支持border-radius。但是,如果你使用的是最新版的浏览器,包括火狐、谷歌、IE等,你不需要使用这些前缀,因为这个技术已经很成熟,在各种最新版的浏览器里已经受到了普遍支持。
让IE支持border-radius
直到IE9才有对border-radius属性的支持,相信很多web开发人员和Web应用设计人员都很沮丧。在IE9里,最重要的一个点是使用edge META 标记:
代码如下:
<meta Http-equiv="X-UA-Compatible" content="IE=edge" />
<style>
border-top-right-radius: 7px;
border-top-left-radius: 7px;
border-bottom-right-radius: 2px;
border-bottom-left-radius: 2px;
</style>
如果你的IE比较老,不支持border-radius,有很多其它的技术可以弥补这个缺陷,我遇到过的最好的一个解决方法是使用一个很小的javascript程序包,叫做CurvyCorners。这个CurvyCorners用javaScript动态的生成很多div标记,用这些div标记来绘出圆角效果,甚至支持消除锯齿功能。
CurvyCorners的用法很简单。第一步是在页面中引入CurvyCorners.js脚本:
代码如下:
<!-- SIMPLY INCLUDE THE JS FILE! -->
<script type="text/javascript" src="curvy.corners.trunk.js">
</script>
CurvyCorners会在DOM元素里寻找具有border-radius属性的元素,然后依次给它们制作出圆角效果。不需要辅助图片。你甚至可以设置指定元素的弧度半径:
代码如下:
var settings = {
tl: { radius: 12 },
tr: { radius: 12 },
bl: { radius: 12 },
br: { radius: 12 },
antiAlias: true
};
$$('.round').each(function(rd) {
curvyCorners(settings,rd);
});
看完上述内容,你们对CSS3中怎么实现圆角效果有进一步的了解吗?如果还想了解更多知识或者相关内容,请关注编程网node.js频道,感谢大家的支持。
--结束END--
本文标题: CSS3中怎么实现圆角效果
本文链接: https://www.lsjlt.com/news/77475.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2022-06-04
2022-06-04
2022-06-04
2022-06-04
2022-06-04
2022-06-04
2022-06-04
2022-06-04
2022-06-04
2022-06-04
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0