兼容各个浏览器的纯CSS圆角代码

css圆形的几种实现方式CSS是一种用于网页样式设计的语言，可以通过CSS实现各种各样的效果，包括圆形。

在本文中，我们将探讨几种使用CSS实现圆形的方式。

一、使用border-radius属性border-radius属性可以设置元素的圆角，通过将border-radius 设置为元素宽度或高度的一半，可以将元素变成一个圆形。

例如，我们可以使用以下代码将一个div元素变成一个圆形：```cssdiv {width: 200px;height: 200px;border-radius: 50%;}```二、使用伪元素伪元素是CSS中的一种特殊元素，可以在元素的内容前后插入额外的样式。

我们可以使用伪元素来创建一个圆形的背景。

以下是一个示例代码：```csswidth: 200px;height: 200px;position: relative;}div::before {content: "";position: absolute;top: 0;left: 0;width: 100%;height: 100%;border-radius: 50%;background-color: red;}```三、使用transform属性transform属性可以对元素进行旋转、缩放、倾斜等变换操作。

我们可以使用transform属性将一个正方形元素旋转45度，然后调整元素的宽度和高度，使其变成一个圆形。

以下是一个示例代码：div {width: 200px;height: 200px;background-color: blue;transform: rotate(45deg);}```四、使用圆形图片如果你有一个圆形的图片，你也可以使用CSS将其应用到元素中。

以下是一个示例代码：```cssdiv {width: 200px;height: 200px;background-image: url("circle.png");background-size: cover;border-radius: 50%;}```五、使用SVGSVG是一种基于XML的图像格式，可以用于在网页中创建矢量图形。

纯css实现带三角箭头带描边带阴影带圆角的兼容各浏览器de 气泡层来源:上次看了乔花的文章CSSBorder使用小分享，刚好手上有个需求，是做一个弹出气泡层，要求是1.带三角指示箭头2.边框需要描边3.渐进圆角有了那篇文章的启发之后，我们这里做起来就简单了说做就做，咱先整个描了边的浮动层，效果如下接着给浮动层，加上三角的箭头指示，在div容器里面加入一个空的s 标签，表示三角1:html2:head3:style4:div{5:position:absolute;6:top:30px;7:left: 40px;8:display:block;9:height:100px;10:width:200px;11:border:1pxsoli d#666;12:}13:s{14:position:absolute;15:top:-21px;16:left:20px;17:display:block;18:height:0;19:width:0;20:font-siz e:0;21:line-height:0;22:border-color:transparenttransparent#666transparent;23:border-sty le:dasheddashedsoliddashed;24:border-width:10px;25:}26:/style27:/head28:body29:div30:s/s31:/div32:/body33 :/html效果，现在，我们需要一个白色背景的小三角将原来的深色三角遮住，用深色三角做底，为了颜色更明显一些，我这里用#ff0做底色，在s标签内嵌套一个空的i标签，并设置它的边框宽度略小一点1:html2:head3:style4:div{5:position:absolute;6:top:30px;7:left: 40px;8:display:block;9:height:100px;10:width:200px;11:border:1pxsoli d#666;12:background-color:#ff0;13:}14:s{15:position:absolute;16:top:-21px;17:left:20px;18:display:block;19:height:0;20:width:0;21:font-siz e:0;22:line-height:0;23:border-color:transparenttransparent#666transparent;24:border-sty le:dasheddashedsoliddashed;25:border-width:10px;26:}27:i{28:position:absolute;29:top:-9px;30:left:-10px;31:display:block;32:height:0;33:width:0;34:font-siz e:0;35:line-height:0;36:border-color:transparenttransparent#ff0transparent;37:border-sty le:dasheddashedsoliddashed;38:border-width:10px;39:}40:/style41:/head42:body43:div44:s45:i/i46:/s47:/div4 8:/body49:/html效果，还不错吧，不过在IE下，有点小瑕疵，三角的定位有点的问题，简单hack一下，并把背景颜色改回白色1:html2:head3:style4:div{5:position:absolute;6:top:30px;7:left: 40px;8:display:block;9:height:100px;10:width:200px;11:border:1pxsoli d#666;12:background-color:#fff;13:}14:s{15:position:absolute;16:top:-21px;17:*top:-20px;18:left:20px;19:display:block;20:height:0;21:width:0;22:font-siz e:0;23:line-height:0;24:border-color:transparenttransparent#666transparent;25:border-sty le:dasheddashedsoliddashed;26:border-width:10px;27:}28:i{29:position:absolute;30:top:-9px;31:*top:-9px;32:left:-10px;33:display:block;34:height:0;35:width:0;36:font-siz e:0;37:line-height:0;38:border-color:transparenttransparent#ffftransparent;39:border-sty le:dasheddashedsoliddashed;40:border-width:10px;41:}42:/style43:/head44:body45:div46:s47:i/i48:/s49:/div5 0:/body51:/html这样在IE下效果也ok了接着，我们需要给气泡层加上阴影效果。

纯代码实现CSS圆⾓我这⾥说的是纯代码，是指的不使⽤图⽚实现圆⾓，图⽚实现圆⾓，这⾥就不说了。

纯代码实现圆⾓主要有3种⽅法：第⼀种：CSS3圆⾓#chaomao{border-radius:2px 2px 2px 2px;}上⾯代码的意思是左上、右上、右下、右下分别2px的圆⾓当然也可以简写：border-radius:2px⽅向是从左上到左下逆时针也可以分别指定#chaomao{border-top-left-radius:4px 2px;border-top-right-radius:3px 4px;border-bottom-right-radius:6px 2px;border-bottom-left-radius:3px 4px;}意思很简明⽕狐等浏览器也⽀持⾃⼰的私有圆⾓属性Firefox⽀持border-radius(圆⾓)：-moz-border-radius:2pxwebkit内核的Safari和Chrome⽀持border-radius(圆⾓)：-webkit-border-radius:2pxOpera⽀持border-radius(圆⾓)：border-radius:2pxCSS3实现圆⾓最简单了，可惜IE6-8不⽀持第⼆种：⽤CSS+html代码百度知道的⾸页圆⾓就是⽤这种⽅法实现的有点：兼容所有浏览器，缺点：需要添加额外的HTML标签，维护⽐较⿇烦实现原理是利⽤多个空层，上⾯⼀层⽐下⾯少1px，从⽽使边⾓看起来是⼀个圆弧状HTML代码：<div><strong class="b1"></strong><strong class="b2"></strong><strong class="b3"></strong><strong class="b4"></strong><div class="content">⽂字内容</div></div>CSS代码b1,.b2,.b3,.b4,.b5,.b6,.b7,.b8{height:1px;font-size:1px;overflow:hidden;display:block;}.b1,.b8{margin:0 5px;}.b2,.b7{margin:0 3px;border-right:2px solid;border-left:2px solid;}.b3,.b6{margin:0 2px;border-right:1px solid;border-left:1px solid;}.b4,.b5{margin:0 1px;border-right:1px solid;border-left:1px solid;height:2px;}第三种：利⽤jQuery圆⾓插件代码实现圆⾓优点：兼容所有浏览器缺点：需要使⽤jQuery插件这是⼀个jQuery插件，使⽤的时候，需要jQuery⽂件⼀起，使⽤⽅法很简单$("#chaomao").corner("5px")它就实现了id值问哦chaomao的元素，5px的圆⾓。

CSS实现圆角的三种方法方法一：border-radius属性border-radius属性是CSS3引入的新属性，可以用来设置元素的圆角效果。

通过设置border-radius属性，可以将元素的边框角变为圆角。

border-radius属性的语法如下：border-radius: <length>，<percentage>，[<length>，<percentage>]{1,4}[/ <length>，<percentage>]{0,2}其中，<length>表示长度值，可以是数值或使用像素、百分比等单位。

<percentage>表示百分比值。

方括号表示可选项，花括号中的数字表示可重复的次数。

斜杠后的部分表示可选的内切椭圆半径。

例如，要给一个元素设置4个角的圆角效果，可以使用以下代码：```cssborder-radius: 10px;```此代码将元素的4个角都设置为10像素的圆角。

方法二：border-image属性border-image属性也是CSS3引入的新属性，用于将图片应用到元素的边框上，同时也可以实现圆角效果。

border-image属性的语法如下：border-image: <source>，<slice>[<width>，<outset>]?[<repeat>]?，inherit其中，<source>表示图片的路径。

<slice>表示图片的裁剪区域。

<width>表示图片的宽度。

<outset>表示边框图像区域超出边框的距离。

<repeat>表示是否重复显示边框图像。

例如，要给一个元素设置圆角效果并使用图片作为边框，可以使用以下代码：```cssborder-image: url(border.png) 30 round;```此代码将会把border.png这张图片应用到元素的边框上，并且设置一个30像素的裁剪区域，使得图片能够以圆角形式显示。

基于css clip-path实现切圆角的技巧全文共四篇示例，供读者参考第一篇示例：CSS的clip-path属性可以用来裁剪元素的区域，实现各种形状。

其中一个常见的应用场景是使用clip-path属性来实现圆角效果。

而在实现圆角效果的过程中，我们可以根据不同的需求选择不同的技巧来达到理想的效果。

我们来看一种简单的实现圆角的方法。

通过clip-path属性结合border-radius属性，我们可以轻松地实现一个圆形或椭圆形的元素。

我们可以使用如下的CSS代码来实现一个圆形的元素：```.circle {width: 100px;height: 100px;border-radius: 50%;clip-path: circle(50% at center);}```在上面的代码中，我们首先设置了元素的宽度和高度，并且将border-radius属性设置为50%，使得元素呈现为一个圆形。

然后，通过clip-path属性和circle函数来定义一个圆形的裁剪区域，其中50%表示圆形的半径，at center表示圆形的中心点。

除了实现圆形的元素之外，我们还可以通过clip-path属性实现不规则形状的圆角效果。

我们可以使用polygon函数来定义一个多边形的裁剪区域。

下面是一个实现梯形效果的例子：在上面的代码中，我们使用polygon函数来定义一个梯形的裁剪区域，其中各个点的坐标决定了裁剪区域的形状。

在上面的代码中，我们使用inset函数来定义一个矩形的裁剪区域，其中0 25% 0 0表示裁剪区域与元素四个边的距离，round 25px 0 0 0表示矩形四个角的圆角半径。

第二篇示例：在web开发中，常常需要对页面元素进行样式设计，其中一个常见的需求就是给元素添加圆角。

在过去，实现圆角效果通常是通过border-radius属性来实现的，但是现在有另外一种更加灵活、更加精细的方法，那就是使用CSS clip-path属性来实现切圆角效果。

一、border-radius的基本概念border-radius是CSS3中用来设置元素边框圆角的属性，通过它可以为元素的四个角设置不同的圆角半径，从而实现元素的外观美化效果。

在日常的网页设计中，border-radius常常用来创建按钮、卡片、图片框等元素的圆角效果，使得页面更加美观和舒适。

二、普通用法在CSS中，border-radius的普通用法就是通过简单的设置属性值来实现元素的圆角效果。

一般情况下，我们可以通过以下的语法来定义元素的圆角效果：{border-radius: 10px;}这样就可以给一个元素的四个角分别设置10px的圆角半径，使得元素呈现出圆角的外观。

当然，我们也可以使用百分比或者具体的长宽值来实现不同的圆角效果，例如：{border-radius: 50 10px;}这样就可以设置水平方向的圆角为50的椭圆形，垂直方向的圆角为10px的圆形。

三、高级用法除了普通的用法之外，border-radius还有一些高级的使用技巧，可以实现更加炫酷的效果。

下面就介绍一些常见的高级用法：1、不规则圆角在实际的设计过程中，有时候我们需要实现不规则的圆角效果，例如只设置左上角和右下角为圆形，而其他两个角为直角。

这时，我们可以通过直接指定每个角的圆角半径来实现：{border-top-left-radius:10px;border-bottom-right-radius:10px;}这样就可以实现不规则圆角的效果，使得元素的外观更加个性化。

2、双重圆角有时候我们还需要在一个元素上实现双重圆角效果，即在元素的外部再套上一个有圆角效果的边框。

这时，我们可以通过伪元素与绝对定位来实现双重圆角的效果：{position:relative;}{content:'';position:absolute;top:-10px;right:-10px;bottom:-10px;left:-10px;border:10px solid #fff;border-radius: 20px;}这样就可以在元素的外部再添加一个有圆角效果的边框，实现双重圆角效果。

解决不同浏览器兼容性不⼀致导致css的animation不起效最近项⽬中，需要把APP的纯html5的项⽬显⽰在⼀个移动的⼴告屏上边，⼴告屏是基于安卓系统的，浏览器不清楚什么版本，直接使⽤css 的animation是不⽀持的。

有⼀个页⾯是通过animation实现页⾯的图⽚的跳动，结果浏览器不⽀持，刚开始使⽤js解决（结果js解决由于⽔平不够导致效果不好，⽽且还会弹出⽩⾊的块，电脑浏览器都不会出现这个，就这个⼴告屏出现，真的恶⼼）⽆奈之下，只能让浏览器去兼容css的animation。

⼀开始页⾯的css代码是这样的@keyframes rotate {0%{transform: translateY(0);}25%{transform: translateY(-10px);}50%{transform: translateY(-20px);}75%{transform: translateY(-10px);}100%{transform: translateY(0);}}.active{animation:rotate 1s linear infinite;}　这段代码就是让图⽚不停地上下跳动跳动，有兴趣的可以复制下来找张图⽚玩玩，不能兼容项⽬需要的浏览器，需要修改为@-webkit-keyframes rotate {0%{-webkit-transform: translateY(0);}25%{-webkit-transform: translateY(-2vmin);}50%{-webkit-transform: translateY(-4vmin);}75%{-webkit-transform: translateY(-2vmin);}100%{-webkit-transform: translateY(0);}}@-o-keyframes rotate {0%{-webkit-transform: translateY(0);}25%{-webkit-transform: translateY(-2vmin);}50%{-webkit-transform: translateY(-4vmin);}75%{-webkit-transform: translateY(-2vmin);}100%{-webkit-transform: translateY(0);}}@-moz-keyframes rotate {0%{-webkit-transform: translateY(0);}25%{-webkit-transform: translateY(-2vmin);}50%{-webkit-transform: translateY(-4vmin);}75%{-webkit-transform: translateY(-2vmin);}100%{-webkit-transform: translateY(0);}}@keyframes rotate {0%{-webkit-transform: translateY(0);}25%{-webkit-transform: translateY(-2vmin);}50%{-webkit-transform: translateY(-4vmin);}75%{-webkit-transform: translateY(-2vmin);}100%{-webkit-transform: translateY(0);}}.active{-webkit-animation:rotate 1s linear infinite;-o-animation:rotate 1s linear infinite;-moz-animation:rotate 1s linear infinite;animation:rotate 1s linear infinite;} 代码有点长（动画的代码多），就是为了处理兼容性问题。

CSS奇思妙想巧妙的实现带圆⾓的三⾓形之前在这篇⽂章中 -- ，介绍了 6 种使⽤ CSS 实现三⾓形的⽅式。

但是其中漏掉了⼀个⾮常重要的场景，如何使⽤纯 CSS 实现带圆⾓的三⾓形呢？，像是这样：本⽂将介绍⼏种实现带圆⾓的三⾓形的实现⽅式。

法⼀. 全兼容的 SVG ⼤法想要⽣成⼀个带圆⾓的三⾓形，代码量最少、最好的⽅式是使⽤ SVG ⽣成。

使⽤ SVG 的 多边形标签 <polygon> ⽣成⼀个三边形，使⽤ SVG 的 stroke-linejoin="round" ⽣成连接处的圆⾓。

代码量⾮常少，核⼼代码如下：<svg width="250" height="250" viewBox="-50 -50 300 300"><polygon class="triangle" stroke-linejoin="round" points="100,0 0,200 200,200"/></svg>.triangle {fill: #0f0;stroke: #0f0;stroke-width: 10;}实际图形如下：这⾥，其实是借助了 SVG 多边形的 stroke-linejoin: round 属性⽣成的圆⾓，stroke-linejoin 是什么？它⽤来控制两条描边线段之间，有三个可选值：miter 是默认值，表⽰⽤⽅形画笔在连接处形成尖⾓round 表⽰⽤圆⾓连接，实现平滑效果bevel 连接处会形成⼀个斜接我们实际是通过⼀个带边框，且边框连接类型为 stroke-linejoin: round 的多边形⽣成圆⾓三⾓形的。

如果，我们把底⾊和边框⾊区分开，实际是这样的：.triangle {fill: #0f0;stroke: #000;stroke-width: 10;}通过 st roke-w i dt h 控制圆⾓⼤⼩那么如何控制圆⾓⼤⼩呢？也⾮常简单，通过控制 stroke-width 的⼤⼩，可以改变圆⾓的⼤⼩。

CSS3 经典教程系列：CSS3 圆角（border-radius）详解《CSS3 入门教程系列》前一篇文章详细介绍了 CSS3 RGBA特性的用法，今天这篇文章我们在一起来看看CSS3中用于实现圆角效果的border-radius属性的具体用法。

以前制作圆角效果，我们都需要使用多张圆角图片做为背景分别应用到每个角上，我应用最多的就是在需要圆角的元素标签中加四个空标签，然后在每个空标签中应用一个圆角的背景位置，然后在对这几个应用了圆角的标签进行定位到相应的位置，非常繁琐。

您可能感兴趣的相关文章∙Web 开发人员和设计师必读文章推荐∙20个非常绚丽的 CSS3 特性应用演示∙35个让人惊讶的 CSS3 动画效果演示∙推荐12个漂亮的 CSS3 按钮实现方案∙24款非常实用的 CSS3 工具终极收藏现在有了CSS3的 border-radius 特性之后，实现边框圆角效果就非常简单了，而且其还有多个优点：一是减少网站维护工作量；二是提高了网站的性能，少了对图片的 HTTP 的请求，网页载入速度将变快；三是增加视觉美观性。

既然border-radius有这么多好处，我们就从他的语法，属性和属性值等方面来看其如何应用，又是如何制作圆角，还有就是除了制作圆角他还能制作什么？有这么多，那我们就开始吧：基本语法：border-radius ： none | <length>{1,4} [/ <length>{1,4} ]? 取值范围：<length>： 由浮点数字和单位标识符组成的长度值。

不可为负值。

简单说明：border-radius 是一种缩写方法。

如果“/”前后的值都存在，那么“/”前面的值设置其水平半径，“/”后面值设置其垂直半径。

如果没有“/”，则水平和垂直半径相等。

另 外其四个值是按照top-left 、top-right 、bottom-right 、bottom-left 的顺序来设置的其主要会有下面几种情形出现：1、只有一个值，那么 top-left 、top-right 、bottom-right 、bottom-left 四个值相等。

纯css实现让div的四个⾓成弧形复制代码代码如下:<html><head><style type="text/css">.img-preview{-moz-border-bottom-colors: none;-moz-border-left-colors: none;-moz-border-right-colors: none;-moz-border-top-colors: none;border-bottom-color: #B8B8B8;border-bottom-left-radius: 5px;border-bottom-right-radius: 5px;border-bottom-style: solid;border-bottom-width: 1px;border-image-outset: 0 0 0 0;border-image-repeat: stretch stretch;border-image-slice: 100% 100% 100% 100%;border-image-source: none;border-image-width: 1 1 1 1;border-left-color-ltr-source: physical;border-left-color-rtl-source: physical;border-left-color-value: #B8B8B8;border-left-style-ltr-source: physical;border-left-style-rtl-source: physical;border-left-style-value: solid;border-left-width-ltr-source: physical;border-left-width-rtl-source: physical;border-left-width-value: 1px;border-right-color-ltr-source: physical;border-right-color-rtl-source: physical;border-right-color-value: #B8B8B8;border-right-style-ltr-source: physical;border-right-style-rtl-source: physical;border-right-style-value: solid;border-right-width-ltr-source: physical;border-right-width-rtl-source: physical;border-right-width-value: 1px;border-top-color: #B8B8B8;border-top-left-radius: 5px;border-top-right-radius: 5px;border-top-style: solid;border-top-width: 1px;box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);float: left;width: 350px;height:200px;}</style></head><body><div class="img-preview"></div></body></html>。