`

CSS3——圆角(Border Radius)

    博客分类:
  • CSS3
 
阅读更多
1、四个角的圆角半径都一样的情况:

-webkit-border-radius: 10px; /*webkit内核支持*/
-moz-border-radius: 10px;/*Gecko内核支持*/
border-radius: 10px; /*CSS3支持*/


2、四个角的圆角半径都不一样的情况:

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

-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 20px;
-moz-border-radius-bottomright: 40px;
-moz-border-radius-bottomleft: 20px;

border-top-left-radius: 10px;
border-top-right-radius: 20px;
border-bottom-right-radius: 40px;
border-bottom-left-radius: 20px;


引用

圆角生成工具:http://border-radius.com/
分享到:
评论

相关推荐

    css3教程应用css3 圆角border-radius属性制作...

    在CSS3中,`border-radius`属性是一个非常重要的特性,它允许我们为元素的边框创建圆角效果,使得设计更加美观和现代化。这个特性在网页设计中被广泛应用,可以替代传统的图片切角方法,提高网页加载速度并优化用户...

    css3(border-radius)边框圆角详解

    CSS3 中的 border-radius 属性可以生成圆角边框,无需使用图片背景图案,从而简化了网页设计的过程。下面对 border-radius 属性进行详细介绍。 一、border-radius 属性 border-radius 属性是 CSS3 中用于生成圆角...

    IE实现CSS3中的border-radius(圆角)

    让IE实现CSS3中的border-radius(圆角)

    引入PIE.htc使ie7,ie8 支持css3 border-radius圆角效果

    在IT行业中,CSS3是 Cascading Style Sheets 的第三版本,带来了许多令人兴奋的新特性,其中包括 `border-radius`,它使得我们可以轻松地为HTML元素添加圆角效果,无需使用图像或复杂的CSS技巧。然而,这个特性在...

    让IE6也识别CSS3-圆角效果应用border-radius

    在互联网技术日新月异的时代,CSS3的出现极大地丰富了网页设计的视觉表现力,其中,`border-radius`属性是实现圆角效果的关键。然而,对于那些仍在使用较旧浏览器,尤其是Internet Explorer 6(简称IE6)的用户来说...

    IE兼容CSS3圆角border-radius的方法(同时兼容box-shadow,text-shadow)

    本篇将详细探讨如何实现IE浏览器对CSS3圆角`border-radius`以及`box-shadow`和`text-shadow`的支持。 首先,`border-radius`属性是CSS3引入的新特性,允许我们为元素的边框创建圆角,而非传统的直角。然而,IE8及...

    CSS3的Border-radius轻松制作圆角

    前面系统总结了CSS3中Gradient和RGBA的用法,今天我们在一起来看看CSS3中制作圆角的属性border-radius的具体用法;在CSS2中,大家都碰到过圆角的制作,如今CSS3中的border-radius出现后,让我们没有那么多的烦恼了

    CSS3中border-radius属性设定圆角的使用技巧

    border-radius CSS3中的代表——第一个在社区中得到广泛使用新属性。这意味着,除去Internet Explorer 8及更低版本,所有的浏览器可以显示圆角。为了使样式能正确应用,需要为Webkit和Mozilla内核添加前缀。 CSS ...

    CSS3中border-radius、box-shadow与gradient那点事儿

    在CSS3中,border-radius、box-shadow和gradient是三个非常重要的样式属性,它们极大地提升了网页设计的美观性和表现力。让我们逐一深入探讨这三个概念。 首先,`border-radius`属性允许我们为元素的边框添加圆角,...

    css3兼容圆角

    在CSS3中,圆角边框(border-radius)是一个非常重要的特性,它允许开发者为元素创建具有圆形或椭圆形边角的效果,提升了网页设计的视觉吸引力。然而,这个特性在早期版本的Internet Explorer(尤其是IE8)中并不...

    css3实现圆角矩形

    标题"css3实现圆角矩形"所指的就是利用CSS3的`border-radius`属性来设计带有圆角的矩形元素,这个特性极大地增强了网页的视觉效果,并且提供了更好的用户体验。描述中提到“兼容到IE6”,意味着我们将讨论如何在包括...

    css+div圆角窗口

    然而,随着CSS3的推出,圆角边框变得异常简单,通过`border-radius`属性就能轻松实现。下面我们将详细介绍如何使用CSS3创建圆角窗口,以及相关的知识点。 1. **border-radius属性**: `border-radius`属性允许我们...

    解决border-radius失效问题

    在CSS世界中,`border-radius`属性是一个非常重要的特性,它允许我们为元素添加圆角效果,从而使得设计更加精致和现代。然而,在实际开发中,我们可能会遇到`border-radius`失效的问题,导致元素的边角无法按照预期...

    让IE6、IE7、IE8支持CSS3的圆角、阴影样式

    在CSS3中,`border-radius`属性用于创建圆角效果,它可以分别设置四个角的圆角半径,或者用简写形式一次性设置所有角。例如: ```css .box { border-radius: 10px; /* 所有角的圆角半径为10像素 */ } ``` 对于...

    圆角魅力:CSS border-radius全攻略

    ### 圆角魅力:CSS `border-radius`全攻略 在当今网页设计中,圆角(border-radius)的应用已经成为提升用户体验及界面美观度的关键技术之一。它不仅赋予了用户界面更加柔和且现代的感觉,而且还能帮助设计师们实现...

    Css3圆角边框

    CSS3中的`border-radius`属性是实现这一效果的关键。这个属性可以让你为每个角落设置独立的半径值,或者统一设置四个角的半径。基本语法如下: ```css element { border-radius: top-left-radius top-right-radius...

    CSS制作圆角效果

    首先,我们了解CSS中实现圆角效果的主要属性——`border-radius`。这个属性允许我们将元素的边框转换为圆形或椭圆形,从而实现圆角效果。`border-radius`的语法相当直观,可以单独对每个角落设置值,也可以统一设置...

    用js实现css3效果的圆角方法

    随着CSS3的普及,我们可以直接通过CSS的`border-radius`属性轻松实现圆角效果。然而,有些浏览器可能不支持CSS3,或者在某些特定情况下,我们需要用JavaScript来动态调整圆角。本文将探讨如何用JavaScript来实现CSS3...

    css+圆角总结

    CSS3引入了`border-radius`属性,它允许我们为元素的四个角设定不同的圆角半径,从而实现圆角效果。基本语法如下: ```css element { border-radius: top-left-radius top-right-radius bottom-right-radius ...

Global site tag (gtag.js) - Google Analytics