`

CSS 圆角

    博客分类:
  • CSS
阅读更多

先说一下Firefox的圆角属性:
-moz-border-radius: {1,4} | inherit
如果你想设置四个角都是一样圆角的话,可以像这样子直接设置-moz-border-radius:5px;
也可以单独设置元素的上左、上右、下右、下左四个角的值,分别用-moz-border-radius-topleft、-moz-border-radius-topright、-moz-border-radius-bottomright、-moz-border-radius-bottomleft来设置。
也可以用合并起来一起设置,如我目前的主题暂时设置的-moz-border-radius:5px 0 5px 0;

对chrome、Safari这两个webkit内核的浏览器来说,是用-webkit-border-radius来实现的。
-webkit-border-radius:{1,2} | inherit;
如果你想设置四个角都是一样圆角的话,依然可以像这样子直接设置-moz-border-radius:3px;
如果是单独设置四个角的话,需要采取这种方式

-webkit-border-top-left-radius:5px 10px;
-webkit-border-top-right-radius:5px 10px;
-webkit-border-bottom-right-radius:5px 10px;
-webkit-border-bottom-left-radius:5px 10px;

如果是要合并的话,只支持-webkit-border-radius:3px;或者是这样子-webkit-border-radius:3px 4px;使用-webkit-border-radius:5px 0 5px 0;将不会有任何效果。

总结圆角属性不同浏览器下的运用

-moz-border-radius: 5px;
-khtml-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;

 

其他:

http://www.ruanyifeng.com/blog/2010/12/detailed_explanation_of_css3_rounded_corners.html

分享到:
评论

相关推荐

    无懈可击的CSS圆角边框(自由伸缩)

    ### 无懈可击的CSS圆角边框(自由伸缩) #### CSS圆角边框技术解析 在网页设计中,圆角边框是一种常见的视觉元素,能够为页面带来更加柔和、美观的效果。然而,当涉及到创建一个可以自由伸缩的圆角边框时,就需要...

    css圆角边框css圆角边框css圆角边框

    css圆角边框css圆角边框css圆角边框css圆角边框css圆角边框

    CSS圆角组件CSS圆角组件

    其中,CSS圆角组件是CSS3引入的一项重要特性,它使得我们可以为网页元素创建平滑、优雅的圆角边框,从而提升用户界面的美观度和现代感。本篇将深入探讨CSS圆角组件的使用方法、兼容性以及实际应用。 首先,实现CSS...

    css圆角css圆角

    CSS圆角是网页设计中一个重要的视觉效果,它允许元素的边角呈现出平滑的圆形或椭圆形,而不是传统的直角。在CSS中,我们使用`border-radius`属性来实现这个效果,它提供了对元素四角半径的控制,使得元素的外观更加...

    css 圆角实现例子

    css 圆角实现例子,无图实现CSS圆角

    css 圆角 很简单的css圆角~让你突破css的困扰

    很简单的css圆角~让你突破css的困扰

    css圆角提示框.zip

    【CSS圆角提示框】是一种常见的前端开发技术,主要用于创建具有视觉吸引力且用户体验良好的提示信息。在本案例中,我们看到的"css圆角提示框.zip"是一个包含纯HTML和CSS代码的压缩包,用于展示如何在不同浏览器上...

    多种CSS圆角特效代码及演示

    这个压缩包“多种CSS圆角特效代码及演示”显然是一个包含各种CSS圆角效果实现的资源集合,适合设计师和开发者学习和参考。CSS圆角是通过`border-radius`属性实现的,它允许我们创建出不再是直角的边框,从而为元素...

    自适应宽度的CSS圆角背景的按钮

    总结起来,创建自适应宽度的CSS圆角背景按钮,主要依赖于`border-radius`属性实现圆角效果,利用`display: inline-block;`和不设定固定宽度实现自适应宽度,以及通过适当的内填充和文本对齐方式保持内容居中。通过...

    CSS圆角制作器 v1.0

    CSS圆角制作器 v1.0 是一个专门用于生成CSS圆角样式的在线工具,它简化了设计过程,使得创建具有圆润边缘的网页元素变得轻而易举。 **一、CSS3圆角边框** CSS3中的`border-radius`属性是实现圆角边框的关键。通过...

    简洁型css圆角矩形

    #### 一、CSS圆角矩形概述 在Web设计中,使用CSS创建圆角矩形可以提升网站的视觉效果。本文档介绍了两种不同的方法来实现圆角矩形:一种是简洁型CSS圆角矩形;另一种是带有3D效果的CSS圆角矩形。 #### 二、简洁型...

    百度百科里的CSS圆角效果.rar

    "百度百科里的CSS圆角效果.rar"这个压缩包文件,很可能是包含了一个示例,展示了如何在实际项目中应用CSS圆角效果。 CSS圆角效果主要通过`border-radius`属性实现。这个属性允许我们设置元素边框四个角落的圆润程度...

    很不错的css圆角[百度有啊]

    在标题“很不错的css圆角[百度有啊]”和描述“代码简结,重复利用高很不错的css圆角[百度有啊]”中,我们看到对CSS圆角的高度评价,这表明这是一种简洁且高效的设计技巧。 要理解CSS圆角,首先我们需要知道如何通过...

    纯CSS圆角 很简单

    标题"纯CSS圆角 很简单"和描述都强调了使用CSS实现圆角效果的简便性。本文将深入探讨如何使用CSS创建圆角,以及这一技术的基本原理和相关属性。 首先,CSS3引入了一组新的边框属性,使得创建圆角变得非常直观。这些...

    css圆角.docx

    本文将深入探讨四种常见的CSS圆角框实现方法。 1. **无图片纯CSS圆角框**: - **优点**:兼容所有浏览器,无需额外图片资源。 - **缺点**:需要添加大量无语义的HTML标签,结构冗余,不利于重用。若需调整不同...

    不错的css圆角

    "不错的css圆角"这个主题涉及到CSS中的边框半径属性,它允许我们轻松地为任何元素添加圆角效果。 CSS边框半径属性(border-radius)是在CSS3中引入的,用来取代早期的一些复杂方法,如使用图片或者JavaScript来实现...

    div css圆角代码各种圆角表格_圆角边框css圆角

    在网页设计中,`div` 和 `CSS` 是不可或缺的部分,尤其当涉及到界面美观和用户体验时,圆角设计显得尤为重要。圆角边框不仅能够使网页元素看起来更加柔和,还能提升整体设计的现代感。本篇文章将深入探讨如何使用 `...

    css兼容包-CSS圆角、阴影

    "css兼容包-CSS圆角、阴影"正是为了解决这个问题而存在的。 标题中的“CSS圆角”是指CSS3中引入的一种样式,允许我们为元素的边角设置圆润的效果,而不是传统的直角。`border-radius`属性是实现这一效果的关键。它...

    css 圆角边框 样式表

    本文将深入探讨CSS圆角边框的原理以及如何在实际网页设计中应用。 一、CSS圆角边框的原理 CSS3引入了`border-radius`属性,允许我们设置元素边框的圆角半径。这个属性可以接受一到四个值,分别对应元素的上左、上...

Global site tag (gtag.js) - Google Analytics