实现CSS3中的border-radius（圆角）

最新推荐文章于 2024-04-12 22:35:54 发布
最新推荐文章于 2024-04-12 22:35:54 发布
阅读量829 收藏
点赞数
文章标签： xhtml

实现边框圆角

-moz-border-radius: 32px;
-webkit-border-radius: 32px;
border-radius: 32px;
behavior: url(border-radius.htc);

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<style type="text/css">
body {
	background-color: #fff;
	font: normal 11pt Trebuchet MS,Arial,sans-serif;
}

.box1 {
	background-color: #f0f0f0;
	width: 533px;
	height: 50px;
	margin: 0 auto 50px auto;
	padding: 20px;
	border: 1px solid #d7d7d7;

	-moz-border-radius: 11px;
	-webkit-border-radius: 11px;
	border-radius: 10px;
	
}

.box2 {
	background: transparent url(ashera.jpg); no-repeat top left;
	width: 420px;
	height: 220px;
	margin: 0 auto 35px auto;
	padding: 30px;
	color: #fff;
	font-weight: bold;
	border: 11px solid #35b70e;

	-moz-border-radius: 32px;
	-webkit-border-radius: 32px;
	border-radius: 32px;
	behavior: url(border-radius.htc);
}

.box3 {
	background-color: #ddd;
	width: 210px;
	height: 30px;
	padding: 20px;
	position: absolute;
	top: 5px; left: 5px;

	-moz-border-radius: 15px;
	-webkit-border-radius: 15px;
	border-radius: 15px;
	behavior: url(border-radius.htc);
}

.rel {
	margin: 50px 0 0 33px;
	padding: 25px;
	position: relative;
	z-index: inherit;
	zoom: 1; /* For IE6 */
}

</style>
</head>
<body>
<p>Not just divs, but any element*</p>
	<div class="rel">
		<div class="box1">
			11 lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet 
		</div>
		<div class="box2">
			22 this cat is a hybrid of domestic and wild breeds :)
		</div>
		<div class="box3">
			33 this box is absolutely positioned
		</div>
	</div>
</body>
</html>


iteye_3606
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
纯css实现边框圆角效果
12-31
纯css 实现边框圆角实例,不使用图片，时候所有浏览器.
CSS边框圆角
卑微人的博客
02-21 533
CSS边框圆角 圆角的一些设置： /* 圆角边框 */ /* 正方形把高度设置为盒子的一半就的圆 */ border-radius: 15px; 盒子的阴影:
CSS圆角边框
m0_63639281的博客
07-15 4483
css如何设置圆角边框？css设置圆角边框的方法？
css圆角边框
a735725的博客
05-18 646
border-radius:3px 4px 5px 6px
CSS3中border-radius属性设定圆角的使用技巧
01-21
border-radius CSS3中的代表——第一个在社区中得到广泛使用新属性。这意味着，除去Internet Explorer 8及更低版本，所有的浏览器可以显示圆角。为了使样式能正确应用，需要为Webkit和Mozilla内核添加前缀。 CSS ...
CSS圆角效果 -webkit-border-radius(CSS3中border-radius隐藏的威力)
09-25
CSS中的`border-radius`属性是CSS3引入的一个强大的特性，用于创建圆角边框效果，使得元素的四个角可以平滑地过渡到边框边缘，而不是直角显示。这一属性在现代浏览器中得到了广泛支持，但早期版本的浏览器，如...
CSS3的Border-radius轻松制作圆角
01-19
前面系统总结了CSS3中Gradient和RGBA的用法，今天我们在一起来看看CSS3中制作圆角的属性border-radius的具体用法。在CSS2中，大家都碰到过圆角的制作。当时，对于圆角的制作，我们都需要使用多张圆角图片做为背景，...
实现CSS3中的border-radius(边框圆角)示例代码
12-11
实现边框圆角 -moz-border-radius: 32px; -webkit-border-radius: 32px; border-radius: 32px; behavior: url(border-radius.htc); 复制代码代码如下: <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//...
CSS系列之圆角边框（CSS3）
老__L的博客
01-30 1万+
本文主要介绍CSS的border-bottom-left-radius、border-bottom-right-radius、border-radius、border-top-left-radius、border-top-right-radius属性。圆角边框（CSS3）
CSS设置圆角边框
qq_46178261的博客
04-03 794
在CSS3 中，新增了圆角边框的样式，可以使盒子变成圆角。 原理：(椭)圆与边框相切形成圆角效果，长度越大，圆角角度越大 语法 border-radius:length; 参数值可以设置为数值或百分比的形式 如果是正方形，想要设置为一个圆，把数值改为高度或者宽度的一半即可，或者直接写50% 如果是个矩形，设置为高度的一半就是圆角矩形。 该属性是一个简写属性，可以设置四个值，分别代...
CSS3（边框和圆角）
qq_36519236的博客
04-15 1595
CSS31.CSS3圆角2.CSS3盒阴影3.CSS3边界图片 1.CSS3圆角 语法： border-radius: 数值或%； border-radius:5px; 多值 border-radius：左上角，右上角，右下角，左下角；（4值） border-radius：左上角，右上角和左下角，右下角；（3值） border-radius：左上角和右下角，左上角和右下角；（2值） 单角定义...
CSS3 border-radius边框圆角
weixin_30709809的博客
11-14 278
CSS3 border-radius边框圆角http://www.cnblogs.com/polk6/p/6050818.html 在CSS3中提供了对边框进行圆角设定的支持，可对边框1~4个角进行圆角样式设置。 目录 1. 介绍 2. value值的格式和类型 3.border-radius 1~4个参数说明 4. 在线示例 1. 介绍 1.1 圆角属性 CSS3提供了...
css圆角边框怎么设置
热门推荐
dageliuqing的博客
07-23 1万+
总结起来很简单，设置css圆角边框就是设置border-radius的值，设置的数字不同，圆角的大小也不同。通过设计css圆角边框，我们就不需要再用带框的背景图片，这不仅让页面设计更加简单，同时也有利于提升页面加载的速度。本文给大家简单介绍下css圆角边框怎么设置，大家可以参考，也可以直接拿过去使用，当然要修改下具体的参数。上面的css代码，大家可以直接拿去用，至于像15px、50px等这些数据，大家可以通过测试看看具体需要多大数字，这里给出的数字只是参考。圆角边框的最基本用法就是设置四个相同弧度的圆角。.
【CSS应用篇】——CSS如何实现圆角边框
m0_64231944的博客
11-05 4345
实际应用中如何使用圆角属性及注意点；
Web前端基础CSS初识学习笔记（10）简单实例认识 border-radius
Fightingdddd的博客
07-12 238
圆角边框（sublime环境） <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <style> div { width: 200px; height: 200px; border: 1px solid red; } div:first-child { /* 结构伪类选择器 选亲兄弟 */ bo
CSS基础：border-radius圆角边框的4种写法规则以及网页实战应用的3个场景
最新发布
u013179804的博客
04-12 5006
你好，我是云桃桃。一个希望帮助更多朋友快速入门 WEB 前端的程序媛。回复 “前端基础题”，可免费获得前端基础 100 题汇总，回复 “前端工具”，可获取 Web 开发工具合集265篇原创内容-gzh后台回复“”可获取开发工具，持续更新中后台回复“”可得到前端基础100题汇总，持续更新中上文说完border边框，这篇说一下圆角边框。属性用于设置元素的圆角边框效果。通过指定属性，可以使元素的边框呈现圆角而不是直角。比如，下图淘宝的登录，注册，开店按钮。
前端学习（十四）CSS 圆角边框代码
y1yo2的博客
08-24 3805
.content{ border: 2px solid #000000; -moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius:15px; } <div class="content">该边框为圆角;</div>圆角代码也支持拆分的（四个边框都圆角10px的拆分c
border-radius 原理分析
weixin_30398227的博客
12-13 919
border-radius 想必大家都有所了解，比较常见的用法就像下面一样： 注意左边的盒子 border-radius: 100px; 右边的为0哦，所以右边的实际上没有设置圆角边框属性；咱们比较下： 看大家大概都能看懂，不过我就想弄清楚个原理，不然觉得记不住，而且很不爽，而且这个样式细究起来有8个参数可以选，天呐，，， 所以我来说说我理解的圆角原理，就以上图中的 border-ra...
CSS3 border-radius属性实现圆角效果详解
"本文主要介绍了如何使用CSS3的border-radius属性轻松实现Web前端页面的圆角效果，以及这一方法带来的诸多优点，如减少维护工作量、提高网页性能和增加视觉可靠性。文章详细阐述了border-radius属性的取值规则，包括...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值