`
lihuaylh
  • 浏览: 5331 次
  • 性别: Icon_minigender_2
  • 来自: 上海
社区版块
存档分类
最新评论

css3 实现圆角

    博客分类:
  • css
css 
阅读更多

圆角效果 border-radius 

使用方法:

一、

border-radius:10px;//所有角都使用半径为10px的圆角

-webkit-border-radius:10px;//chrome,safari

-moz-border-radius:10px;//firefox

二、

border-radius:5px 4px 2px 1px;//四个半径值分别是左上角、右上角,右下角和左下角,是顺时针

 

三、

 

border-top-left-radius:10px; //左上角

border-top-right-radius:10px;//右上角

border-bottom-right-radius:10px;//右下角

border-bottom-left-radius:10px;//左下角

 

实现实心左半圆:

 div.left-semi-circle{ 

    height:100px;

    width:50px;

    background:green;

    border-radius:100px 0 0px 100px;

    }

 

 

分享到:
评论

相关推荐

    css3实现圆角矩形

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

    CSS3实现圆角阴影渐变效果兼容IE等浏览器

    本文将深入探讨如何利用CSS3实现圆角、阴影和渐变效果,并确保这些效果在包括IE在内的主流浏览器中都能得到良好的兼容性。 首先,我们来讨论CSS3的圆角效果。在CSS3之前,为了实现圆角,开发者通常需要使用大量的...

    使用CSS3实现圆角,阴影,透明.docx

    接下来,我们将详细讨论如何使用CSS3实现圆角、阴影和透明效果。 首先,我们来看圆角。在CSS3之前,创建圆角通常需要使用图片或者复杂的CSS布局。但是CSS3引入了`border-radius`属性,这使得我们可以直接通过代码...

    css3实现圆角边框

    css3中的边框一般多为矩形,也可以通过设置实现圆角边框的效果,通过border-radius:;通过设置该属性值得大小改变边框的圆角大小,从而达到自己需要的圆角边框效果

    css3兼容圆角

    虽然`css3.htc`提供了一种在IE8上实现圆角边框的解决方案,但它也有一些局限性。首先,它依赖于JavaScript,如果用户禁用了JS,那么这个方法就无法生效。其次,`.htc`文件会增加页面加载时间,影响性能。最后,这种...

    纯CSS3实现圆角效果(含IE兼容解决方法)

    因此,对于最新的主流浏览器,只需要一行CSS代码即可实现圆角效果,无需担心兼容性问题。这也展示了Web技术快速发展的优势,使得网页开发者在设计网页时更加高效便捷。 综上所述,CSS3的border-radius属性是实现...

    使用CSS3实现圆角,阴影,透明

    CSS实现圆角,阴影,透明的方法很多,传统的方法都比较复杂,用CSS3就方便很多了,虽然现在各浏览器对CSS3的支持还不是很好,但不久的将来CSS3就会普及. 1.圆角 CSS3实现圆角有两种方法. 第一种是背景图像,传统的CSS每个...

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

    在CSS3之前,我们通常需要使用图片或者复杂的CSS hack来实现圆角,但这些方法往往效率低下且维护困难。随着CSS3的普及,我们可以直接通过CSS的`border-radius`属性轻松实现圆角效果。然而,有些浏览器可能不支持CSS3...

    CSS3实现圆角、阴影、透明效果并兼容各大浏览器

    CSS实现圆角,阴影,透明的方法很多,传统的方法都比较复杂,用CSS3就方便很多了,虽然现在各浏览器对CSS3的支持还不是很好,但不久的将来CSS3就会普及. 1.圆角 CSS3实现圆角有两种方法. 第一种是背景图像,传统的CSS每...

    利用CSS3实现圆角的outline效果的教程

    本教程将深入探讨如何利用CSS3实现圆角的outline效果,特别适用于创建相框效果。 首先,了解`outline`的基本概念: 1. `outline`与`border`的关系:它们是设计边框的两个不同方法。`outline`和`border`相似,都可以...

    jquery实现圆角实例

    但随着技术的发展,如今大多数浏览器都已经支持 CSS3,因此直接使用 CSS3 实现圆角更为推荐。 如果仍需使用 jQuery 实现,下面是一个简单的示例: 1. 引入 jQuery 和相关插件库(假设已下载了名为 "jquery.corner....

    CSS3制作圆角、椭圆、梯形带图标的不规则按钮.rar

    HTML5 CSS3制作的带图标的不规则按钮,这些不规则的形状其实是有规则的,像圆角、椭圆、梯形等,只不过是印象中比矩形的按钮稍微些,但是这些按钮应用在网页上,感觉很有个性哦,让人眼前一亮的感觉,按钮是带有图标...

    纯css实现圆角的代码

    有的资料介绍了css3实现圆角,但ie就是不支持,现在,不用任何图片,用纯css打造圆角,兼容任何浏览器。

    css 圆角实现例子

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

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

    在早期的Internet Explorer浏览器,即IE6、IE7和IE8,它们并不支持CSS3的一些新特性,如圆角和阴影效果。这些特性在现代浏览器中已经非常常见,可以为网页设计提供更丰富的视觉体验。为了让这些老版本的IE浏览器也能...

    ie6 7 支持css3 圆角

    在标题"ie6 7 支持css3 圆角"中,提到的问题是如何在这些老版本的IE浏览器中实现CSS3的圆角效果。 描述中提到的是一种解决方案,即使用插件来实现这一目标。这种插件通常是一个JavaScript或HTC(HTML组件)文件,...

    用CSS实现圆角框框

    ### 使用CSS实现圆角框框 #### 知识点概览 本文将详细介绍如何仅使用CSS来实现圆角框的效果,以及提供两种不同的方法来帮助理解这一技术的应用场景与实现方式。 #### 知识点详解 ##### CSS圆角框基础知识 在网页...

    div+css实现圆角导航菜单的效果

    总的来说,使用`div+css`实现圆角导航菜单需要理解HTML结构、CSS选择器、布局方式以及一些关键样式属性。通过合理的HTML标记和精心设计的CSS样式,我们可以创建出既美观又实用的圆角导航菜单,提升网站的整体视觉...

Global site tag (gtag.js) - Google Analytics