CSS3---圆角设置

1.border-radius是向元素添加圆角边框。border-radius:10px; /* 所有角都使用半径为10px的圆角 */     border-radius: 5px 4px 3px 2px; /* 四个半径值分别是左上角、右上角、右下角和左下角,顺时针 */ 

实心上半圆:

方法:把高度(height)设为宽度(width)的一半,并且只设置左上角和右上角的半径与元素的高度一致(大于也是可以的)。

div{
    height:50px;/*是width的一半*/
    width:100px;
    background:#9da;
    border-radius:50px 50px 0 0;/*半径至少设置为height的值*/
    }

实心圆: 方法:把宽度(width)与高度(height)值设置为一致(也就是正方形),并且四个圆角值都设置为它们值的一半。如下代码:

div{
    height:100px;/*与width设置一致*/
    width:100px;
    background:#9da;
    border-radius:50px;/*四个圆角值都设置为宽度或高度值的一半*/
    }
时间: 2024-10-13 01:12:26

CSS3---圆角设置的相关文章

19 01 04 CSS3 圆角 grba(带通明的) tansition动画 transform变换 animation动画

CSS3圆角 设置某一个角的圆角,比如设置左上角的圆角:border-top-left-radius:30px 60px; 同时分别设置四个角: border-radius:30px 60px 120px 150px; 设置四个圆角相同:border-radius:50%; rgba(新的颜色值表示法) 2.rgba(0,0,0,0.1) 前三个数值表示颜色,第四个数值表示颜色的透明度 CSS3 transition动画 1.transition-property 设置过渡的属性,比如:widt

CSS3圆角、rgba

CSS3圆角 设置某一个角的圆角,比如设置左上角的圆角:border-top-left-radius:30px 60px; 同时分别设置四个角: border-radius:30px 60px 120px 150px; 设置四个圆角相同:border-radius:50%; rgba(新的颜色值表示法) 1.盒子透明度表示法: .box { opacity:0.1; /* 兼容IE */ filter:alpha(opacity=10); } 2.rgba(0,0,0,0.1) 前三个数值表示颜

IE兼容CSS3圆角border-radius的方法

IE兼容CSS3圆角border-radius的方法 优化网站js效果,网上看见一个很简单方便的兼容圆角的方法,记下来. 和大家分享一下,知道的高手就当捧个过场.嘻嘻 1.下载border-radius.htc 2.CSS .radius{ -moz-border-radius: 11px; -webkit-border-radius: 11px; border-radius: 11px; behavior: url(border-radius.htc); } 优点: 一.最为方便让IE实现圆角

css3圆角详解

css3(border-radius)边框圆角详解 传统的圆角生成方案,必须使用多张图片作为背景图案.CSS3的出现,使得我们再也不必浪费时间去制作这些图片了,只需要border-radius属性,支持浏览器IE 9.Opera 10.5.Safari 5.Chrome 4和Firefox 4 一.border-radius属性 CSS3圆角只需设置一个属性:border-radius(含义是"边框半径").你为这个属性提供一个值,就能同时设置四个圆角的半径.所有合法的CSS度量值都可

css3圆角和渐变2种常用功能详解

Css3圆角讲解:想必大家对于图片,背景圆角,都不陌生吧, 圆角语法:border-radius:圆角值: 这个值可以使用:em ,ex,pt,px,百分比; Border-radius跟margin,padding差不多 Border-radius:lefttop,righttop,rightbottom,leftbottom. <div class="box1"></div> .box1{width:200px;height:100px;border-rad

CSS3圆角

使用border-radius属性: (1): (2)但是,如果你要在四个角上一一指定,可以使用以下规则: 四个值: 第一个值为左上角,第二个值为右上角,第三个值为右下角,第四个值为左下角. 三个值: 第一个值为左上角, 第二个值为右上角和左下角,第三个值为右下角 两个值: 第一个值为左上角与右下角,第二个值为右上角与左下角 一个值: 四个圆角值相同 (3)CSS3圆角边框可指定 a:background:#--   背景颜色 b:border:-- -- --     边框 c:backgro

CSS3 圆角属性 border-radius

在 CSS3 中新增了一个 border-radius 边框半径属性,即大家常用的圆角效果.这使得制作圆角将不再麻烦,只需对所用对象加一个 border-radius 属性即可,不必使用图片定位或冗余代码完成了.不过它的使用瓶颈目前也是显而易见的,因为效果显示需支持 CSS3 的现代浏览器,而在一些老版本浏览器上则无法显示,如IE8及以下浏览器就不行. CSS3 圆角属性 border-radius 使用方法: 同时设置四个圆角只需给出一个值即可:border-radius: 10px; 也可以

border-radius 样式表CSS3圆角属性

border-radius 是CSS3圆角属性,用来实现DIV层的4个边框画成圆角. 一.语法: border-radius : none | <length>{1,4} [/ <length>{1,4} ] 如:border-radius:5px 5px 5px 5px; 二.取值: <length>: 由浮点数字和单位标识符组成的长度值.不可为负值. 三.说明: border- radius是一种缩写方法.如果"/"前后的值都存在,那么"

CSS3 经典教程系列:CSS3 圆角(border-radius)详解

<CSS3 入门教程系列>前一篇文章详细介绍了 CSS3 RGBA 特性的用法,今天这篇文章我们在一起来看看 CSS3 中用于实现圆角效果的 border-radius 属性的具体用法. 以前制作圆角效果,我们都需要使用多张圆角图片做为背景分别应用到每个角上,我应用最多的就是在需要圆角的元素标签中加四个空标签,然后在每个空标签中应用一个圆角的背景位置,然后在对这几个应用了圆角的标签进行定位到相应的位置,非常繁琐. 您可能感兴趣的相关文章 Web 开发人员和设计师必读文章推荐 20个非常绚丽的

CSS3圆角详解(border-radius)

1.CSS3圆角的优点 传统的圆角生成方案,必须使用多张图片作为背景图案.CSS3的出现,使得我们再也不必浪费时间去制作这些图片了,而且还有其他多个优点: 减少维护的工作量.图片文件的生成.更新.编写网页代码,这些工作都不再需要了. 提高网页性能.由于不必再发出多余的HTTP请求,网页的载入速度将变快. 增加视觉可靠性.某些情况下(网络拥堵.服务器出错.网速过慢等等),背景图片会下载失败,导致视觉效果不佳.CSS3就不会发生这种情况. 2.border-radius属性 CSS3圆角只需设置一个