CSS3的border

border-radius(圆角)的几点说明：

border-radius:长度
Firefox支持border-radius(圆角)：-moz-border-radius:2px;
webkit内核的Safari和Chrome支持border-radius(圆角)：-webkit-border-radius:2px;
Opera支持border-radius(圆角)：border-radius:2px;
IE不支持border-radius(圆角)

我们还可以随意指定圆角的位置，左上、左下、右上、右下四个方向。在firefox、webkit内核的Safari和Chrome和opera（css3）、中的具体书写格式如下：

-moz-border-radius-topleft / -webkit-border-top-left-radius / border-top-left-radius
-moz-border-radius-topright / -webkit-border-top-right-radius / border-top-right-radius
-moz-border-radius-bottomleft / -webkit-border-bottom-left-radius / border-bottom-left-radius
-moz-border-radius-bottomright / -webkit-border-bottom-right-radius /border-bottom-right-radius

border-radius(圆角)还有其他一些用法，Firefox、webkit内核的Safari和Chrome和opera（css3）其他写法有些略微的差异，具体可以查看以下网址：https://developer.mozilla.org/en/CSS:-moz-border-radius
http://www.the-art-of-web.com/css/border-radius/
http://dancewithnet.com/2008/12/27/border-radius-and-rounded-corner/

时间： 2024-09-13 16:13:23

CSS3的border的相关文章

css3.0:border

在css3.0中,又添加了一个新的属性border-radius,使用border-radius这个属性可以实现圆角边框的效果.除IE和遨游外,目前有Firefox ,Safari,Chrome,Opera支持该属性,其Safari,Chrome,Opera是支持最好的,依照了w3c的标准,仅仅使用border-radius,就可以实现效果,无需加入前缀-webkit.而火狐依然需要加上前缀-moz. 即: Firefox支持border-radius(圆角):-moz-border-radiu

css3圆角border

属性: border-top-right-radius:border-bottom-right-radius:border-bottom-right-radius:border-bottom-right-radius 值:<length> <length>?.它们分别是定义角形状的四分之一椭圆的两个半径 第一个值是水平半径. 如果第二个值省略,则它等于第一个值,这时这个角就是一个四分之一圆角. 如果任意一个值为0,则这个角是矩形,不会是圆的. 值不允许是负值. 属性:border-

css3中Border

从我开始学做网页的时候起,页面上用到的圆角都是头痛的事情,最初是用表格,三行三死,然后把圆角图片切成9块分别填充,呵呵,现在想起来无语. 后面网上又找了css圆角代码,1像素1像素的把圆角拼出来,这时候,我开始懒了,用了几次,当时就无语了. 如今,我更懒了,遇见圆角效果,就做成图片用CSS设置成背景,方便快捷. css3来了,这里有一项新的技术,圆角的效果让我们从此不再忧愁(别急!css3还未正式发布),现在就让我们先睹为快,了解下css3中这一强大的技术:border-radius吧. css

IE9下CSS3多种新功能尝鲜

无意中看到CSS3的强大功能,比较感兴趣,分享下先...呵呵 首先你得安装IE9,,,, 如果你没安装IE9 beata,来这里试试... http://windows.microsoft.com/en-US/internet-explorer/download/ie-9/worldwide 选择语言和版本, 或者是FireFox3.1版本以上,Opera9.5版本以上.(我只是在IE9下面测试). 1. border-radius属性: 很好看的形状不再需要image来实现啦..我们看看如何让

CSS3 试试看

1. border-radius属性: 很好看的形状不再需要image来实现啦..我们看看如何让一个DIV显示为不规则.并在里面存放一些文本.使用CSS3中的border-radius属性: 1 2 3 4 5 6 7 8 div            {                border: solid black;                border-radius: 40px;                height: 1in;                width:

CSS3实例教程:使用border

文章简介:熟练使用border-radius. 这个实例的目的:熟练使用border-radius 涉及的属性:border-radius .linear-gradient . box-shadow 提示:":before" ":after",IE对after.before是不支持的,请在firefox.opera.chrome下试调! 要求浏览器:firefox.opera.chrome 效果图: 先看下大致的步骤: 1.定义class,绘制一个矩形: 2.用bo

巧用CSS3 border实现图片遮罩效果代码

代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  <html xmlns="http://www.w3.org/1999/xhtml">  <head>  <meta http-equiv="

使用CSS3实现的超酷幻灯图片效果

  在线演示 这个教程将介绍如何使用纯CSS创建一个干净的幻灯图片面板.主要想法是在面板中使用背景图片,然后在点击标签后使之动画. HTML标签 HTML主要包括了3个主要部分:radio按钮和标签,容器,及其标题,如下: <section class="cr-container">     <!-- radio buttons and labels -->  <input id="select-img-1" name="ra

用CSS3编程模仿iPhone中的返回按钮

  好像写这个有点晚了,iOS已经从拟物化的年代进化到了扁平化的年代,那些圆角+渐变+阴影的年代已经过去,不过在此仍然要去说下古老的iOS返回按钮. 在过去的年代,大家都以iOS的设计元素为自己移动版页面的设计元素;当中自然少不了经典的返回按钮,看着似乎非常简单的一个返回按钮,但是就是没有啥办法能用代码写出来似的,那个讨厌的三角箭头只能让前端工程师无奈的使用一张图片来拼接(如淘宝.天猫.百度.美团都是图片处理方式);或者就根本不用那个按钮(如Yahoo.Google.Facebook根本就不用)