css3的border-radius圆角

原创 2013年12月02日 15:54:19
<!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="Content-Type" content="text/html; charset=utf-8" />
<style>
	div{
		width:300px;
		height:200px;
		background-color:#0F0;
		border-radius:10px ;
		}
</style>
<title>无标题文档</title>
</head>

<body>
<div></div>
</body>
</html>

注意:如果调兼容的话,加上-moz-     -webkit-    -o-

效果图:


版权声明:原创文章,请标明出处~~~

CSS3 border-radius实现边框圆角

border-radius实现边框圆角   这是css3的属性 border-radius:3px; -webkit-border-radius:3px; -moz-border-radius...
  • wangnanwlw
  • wangnanwlw
  • 2016年08月09日 14:48
  • 837

css3边框——圆角效果(border-radius)、阴影(box-shadow)、边框应用图片(border-image)

1.圆角效果(border-radius)
  • bymyself11
  • bymyself11
  • 2016年07月19日 15:49
  • 3145

不使用border-radius实现圆角框

原文:基本的圆角框 实现原理: 纯CSS方式实现圆角框的原理在网络上已经有很多人详细解说了,下面这个示意图是我将其中的一个圆角进行放大后的效果。从上面效果图中我们可以看到其实这种圆角框是靠一个个容...
  • cindy_rain
  • cindy_rain
  • 2015年11月20日 20:49
  • 1234

CSS3 圆角(border-radius)详解

现在有了 CSS3 的 border-radius 特性之后,实现边框圆角效果就非常简单了,而且其还有多个优点:一是减少网站维护工作量;二是提高了网站的性能,少了对图片的 HTTP 的请求,网页载...
  • hrjoyce1990
  • hrjoyce1990
  • 2013年06月04日 13:54
  • 509

【CSS3】圆角效果 border-radius

border-radius是向元素添加圆角边框。 使用方法: border-radius:10px; /* 所有角都使用半径为10px的圆角 */  border-radius: 5px 4...
  • happyhaojie
  • happyhaojie
  • 2015年12月26日 18:46
  • 188

css3:border-radius圆角边框详解

前言 今天来聊聊这个 border-radius 属性,radius的英文意思是弧度的意思,而国人更喜欢称之为圆角,因为它可以使得我们的边框有棱有角。当年前辈们都是用图片君搞定圆角的年代或用一条...
  • alex8046
  • alex8046
  • 2015年03月28日 17:14
  • 2012

CSS3之边框圆角:border-radius

学习自《论道HTML5》 边框的圆角border-radius是CSS3最常用的属性之一,有了这个属性我们以后不再需要图片资源来实现边框圆角,它的格式如下: [长度 或 百分比] {1,4}[ /...
  • u010028980
  • u010028980
  • 2013年03月30日 01:26
  • 860

CSS3圆角(border-radius)的用法

前缀例1例2:无边框书写顺序其它支持性 值:半径的长度 前缀 -moz(例如 -moz-border-radius)用于Firefox-webkit(例如:-webkit-border-rad...
  • enuola
  • enuola
  • 2013年07月22日 17:40
  • 6962

CSS3 圆角(border-radius)详解

CSS3 经典教程系列:CSS3 圆角(border-radius)详解   《CSS3 入门教程系列》前一篇文章详细介绍了 CSS3 RGBA 特性的用法,今天这篇文章我们在一...
  • pingguonjb
  • pingguonjb
  • 2014年10月26日 12:22
  • 310

border-radius边框圆角效果(CSS3)

最近在学习过程中遇到的用css如何将div生成一个四分之一圆的问题,然后就发现了border-radius属性的神器,现记录一下。border-radius属性border-radius属性可以向di...
  • u013848401
  • u013848401
  • 2016年09月02日 19:14
  • 116
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:css3的border-radius圆角
举报原因:
原因补充:

(最多只允许输入30个字)