CSS3 border-radius圆角的实现方法及用法详解_css3_CSS_网页制作

来源:脚本之家  责任编辑:小易  

这种网2113站看效果5261就4102最方便了1653http://www.css88.com/tool/css3Preview/Border-Radius.html,http://www.divcss5.com/里面有2113好多教5261程,圆角的4102教程也有1653,http://www.w3cplus.com/css3/border-radius,百度不让上链接啊,教程好一些,专辑名称是 《Buid New World》 里面的第九集主要讲述的是CSS3 的圆角边框、阴影和渐变等等,你去这里面找,有一些很不错的,可以拿来学www.zgxue.com防采集请勿采集本网。

以前想实现一个圆角是比较麻烦的,不过现在CSS3来了,实现圆角变的那么的简单只需要一句话:border-radius即可。下面青岛星网跟大家分享下:border-radius的具体用法。

我说两种方法哈:1、上层DIV和百img标签都设置度border-radius圆角列:知css如下:.div1{width:100px;height:100px;border:1px solid lightgray;border-radius:5px

CSS3圆角只需设置一个属性:border-radius(含义是"边框半径")。你为这个属性提供一个值,就能同时设置四个圆角的半径。所有合法的CSS度量值都可以使用:em、ex、pt、px、百分比等等。

举例说明CSS圆角在CSS2和CSS3里的实现方法 在网页设计越来越精美的今天,圆角的应用已经越来越广泛这篇文章将分别讲述圆角在CSS2和CSS3里的创建方法。 从

border-radius的浏览器支持

CSS3圆角只需设置一个属性:border-radius(含义是"边框半径")。你为这个属性提供一个值,就能同时设置四个圆角的半径。所有合法的CSS度量值都可以使用:em

IE 9、Opera 10.5、Safari 5、Chrome 4和Firefox 4,都支持上述的border-radius属性。

具体操作步骤如下: 1、首先打开sublime text软件,新建一个html文件,输入基本的html结构: 2、然后设置一个div,并设置div的class属性,在上方的style中设置

早期版本的Safari和Chrome,支持-webkit-border-radius属性。

不用图片的圆角就是css3了,先看代码 .round-angel { -moz-border-radius: 1em; -webkit-border-radius: 1em; border-radius: 1em; } 标准的css

早期版本的Firefox支持-moz-border-radius属性。

目前来看,为了保证兼容性,只需同时设置-moz-border-radius和border-radius即可。

-moz-border-radius: 15px;border-radius: 15px;

(注意:border-radius必须放在最后声明,否则可能会失效。)

另外,早期版本Firefox的单个圆角的语句,与标准语法略有不同。

-moz-border-radius-topleft(标准语法:border-top-left-radius)

-moz-border-radius-topright(标准语法:border-top-right-radius)

-moz-border-radius-bottomleft(标准语法:border-bottom-left-radius)

-moz-border-radius-bottomright(标准语法:border-bottom-right-radius)

border-radius的实例制作

#rcorners1 { border-radius: 25px; background: #8AC007; padding: 20px; width: 200px; height: 150px;} #rcorners2 { border-radius: 25px; border: 2px solid #8AC007; padding: 20px; width: 200px; height: 150px;} #rcorners3 { border-radius: 25px; background: url(paper.gif); background-position: left top; background-repeat: repeat; padding: 20px; width: 200px; height: 150px;}

CSS3 border-radius - 指定每个圆角

如果你在 border-radius 属性中只指定一个值,那么将生成 4 个 圆角。

但是,如果你要在四个角上一一指定,可以使用以下规则:

四个值: 第一个值为左上角,第二个值为右上角,第三个值为右下角,第四个值为左下角。

三个值: 第一个值为左上角, 第二个值为右上角和左下角,第三个值为右下角

两个值: 第一个值为左上角与右下角,第二个值为右上角与左下角

一个值: 四个圆角值相同

CSS3 border-radius单个圆角的设置

单个圆角的设置除了同时设置四个圆角以外,还可以单独对每个角进行设置。对应四个角,CSS3提供四个单独的属性:

border-top-left-radius

border-top-right-radius

border-bottom-right-radius

border-bottom-left-radius

到此这篇关于CSS3 border-radius圆角的实现方法及用法详解的文章就介绍到这了,更多相关CSS3 border-radius圆角内容请搜索真格学网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持真格学网!

<div class="t"></div><style>.t{padding:15px;border:1px solid red;border-radius:15px;width:30px;}</style>下面2113在给出一个5261实例<html><head>     <title>酷炫菜单4102</title>      <style>      .css3Menus{padding:20px;width:506px;height:260px;background:#eee}    ul{list-style:none}    li{float:left;margin:0 30px 0 0;padding:20px;width:80px;height:80px;-moz-border-radius:60px;-moz-border-radius:60px;border-radius:60px;background-color:#cc0;color:#FFF;font:14px}    li a{display:block;margin:0 40px 0 0;padding:35px 0 0 0;width:80px;height:45px;border-radius:40px;color:#fff;text-align:center;text-decoration:none}    li#Menu1{background-color:#0fc}    li#Menu2{margin-top:100px;background-color:#c90}    li#Menu3{margin-top:50px;background-color:#3f6}    li#Menu1 a{background-color:red}    li#Menu2 a{background-color:#603}    li#Menu3 a{background-color:#6cc}    li a:active,li a:focus,li a:hover{margin:-20px 0 0 -20px;padding:55px 0 0 0;width:120px;height:65px;border-radius:60px;-moz-animation-name:bounce;-moz-animation-duration:1s;-moz-animation-iteration-count:4;-moz-animation-direction:alternate}    @-moz-keyframes bounce{from{margin:-2 40px 0 -2}to{margin:120px 40px 0 0}}    </style>  </head>  <body>     <div class="css3Menus">测试1653信息          <ul>            <li id = "Menu1"><a href="#">Menu1</a></li>              <li id = "Menu2"><a href="#">Menu2</a></li>              <li id = "Menu3"><a href="#">Menu3</a></li>          </ul>      </div>  </body></html>内容来自www.zgxue.com请勿采集。


  • 本文相关:
  • css3 border-radius(圆角)效果在线调试工具
  • css3中border-radius属性设定圆角的使用技巧
  • css3使用border-radius属性制作圆角
  • ie系列不支持css的圆角border-radius等属性的解决方案
  • 实现css3中的border-radius(边框圆角)示例代码
  • css3的border-radius轻松制作圆角
  • css圆角效果 -webkit-border-radius(css3中border-radius隐藏的威力)
  • 如何用CSS3 border-radius来实现圆角DIV
  • 求用CSS3实现圆角边框的border-radius好的示例网站?
  • 网页制作不使用css3怎么做出自适应圆角矩形
  • css实现 圆角的 几种方法
  • css3 怎么实现border-image圆角的问题
  • CSS2和CSS3下实现圆角的不同方法
  • 如何使用css让图片显示圆角
  • div+css如何实现圆角矩形
  • 网页制作CSS圆角代码,不带有图片
  • div css圆角边框怎么设置
  • 网站首页网页制作脚本下载服务器操作系统网站运营平面设计媒体动画电脑基础硬件教程网络安全主页网页制作csscss3css3border-radius圆角css3中border-radius属性设定圆角的使用技巧css3使用border-radius属性制作圆角ie系列不支持css的圆角border-radius等属性的解决方案实现css3中的border-radius(边框圆角)示例代码css3的border-radius轻松制作圆角css圆角效果 -webkit-border-radius(css3中border-radius隐藏的威力)css教程css3div+css教程web标准教程浏览器兼容教程css布局实例css3的transform中scale缩放详解纯css绘制漂亮的圆形图案效果纯css实现聊天框小尖角、气泡效果css3通过scale()、rotate()实现放大、旋转css3 icon font完全指南(css3 font 会取代icon图标)css3实现div圆角效果完整代码 css3实现背景颜色渐变让图片不再是唯一的实现方式8款精美的css3表单设计(登录表单/下拉选择/按钮附演示css3 media queries(响应式布局可以让你定制不同的分css3设置box-pack和box-align让div里面的元素垂直居中css3 border-radius圆角的实现方法及用法详解详解css3中dispaly的grid布局与flex布局css3动画和html5新特性详解详解css3 filter:drop-shadow滤镜与box-shadow区别与css3实现动画的三种方式使用css3实现字体颜色渐变的实现css3实现线性渐变用法示例代码详解css3 input框的实现代码类似google登录的动画效果纯css3+div实现小三角形边框效果的示例代码纯css3实现鼠标滑过按钮动画第二节
    免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved