css3简单的圆角框

<!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=gb2312"
/>
<title>圆角效果border-radius</title>
<style
type="text/css">
body,div{margin:0;padding:0;}
.border{width:200px;border:2px
solid
gray;height:20px;
-moz-border-radius:2px;/*仅Firefox支持，实现圆角效果*/
-webkit-border-radius:2px;/*仅Safari,Chrome支持，实现圆角效果*/
-khtml-border-radius:2px;/*仅Safari,Chrome支持，实现圆角效果*/
border-radius:10px;/*仅Opera，Safari,Chrome支持，实现圆角效果*/
}
</style>
</head>
<body>
<div
class="border">border
radius</div>
</body>
</html>

时间： 2024-10-18 12:45:23

css3简单的圆角框的相关文章

CSS3圆角框、阴影兼容IE JS

<!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> <!--[if IE]> <script type

第4章 背景图像效果之圆角框

一 圆角框 1 固定宽度的圆角框 <style> .box{ width: 418px; background: #effce7 url(img/bottom.gif) no-repeat left bottom;} .box h2{ background: url(img/top.gif) no-repeat left top; padding: 20px 20px 0px 20px ;} .box p{ padding: 0 20px 20px 20px;} </style>

圆角框 投影 不透明度

圆角框 固定宽度的圆角框 两个图像:一个用于框的顶部,一个在底部. <div class="box"> <h2>Lorem Ipsum</h2> <p></p> </div> .box { width: 418px; background: #effce7 url(img/bottom.gif) no-repeat left bottom; } .box h2 { background: url(img/top.g

8个非常个性化的CSS3单/复选框

单选框和复选框在网页表单中应用十分广泛,但是浏览器默认自带的单选框和复选框样式不仅不统一,而且大多都比较简单丑陋.本文给大家介绍了一些基于CSS3的个性化单选框和复选框,一些选中动画是基于jQuery的,你可以挑选喜欢的单选框和复选框应用到自己的网页中去,非常方便. 1.jQuery超级个性化的单线框和复选框 今天要分享的也是一个非常个性化的单选框和复选框插件,颜色你可以自己定义. 在线演示 源码下载 2.CSS3漂亮的自定义Checkbox复选框 9款迷人样式 今天我们来分享一款9款样式迷人的

11.1 圆角框的作用

在网页设计中,通常需要把网页分为若干个部分,这正是CSS的强项.使用CSS可以方便地使用各种手段把页面灵活地分为多个部分.但是简单分割出来的都是矩形方枢,设置背景颜色和边框的颜色,产生的都只能是矩形的方框.而在网页中,经常会需要用到圆角的设计.因此,为了使页面中可以灵活地使用圃角框,有很多专家都研究出了非常好的方法,本章就来专门对圆角的设计进行介绍. http://homepages.ulb.ac.be/~cschrett/zengarden/dayandnight/所示的是一个非常常见的布局形

11.2 固定宽度圆角框

因为不必考虑宽度变化带来的麻烦,所以制作宽度固定的圆角框比制作适应宽度的圆角框要简单很多.关键在于如何合理地使用背景图像. 一.两背景图像法 本例制作如图1所示的圆角框,使用两个背景图像文件,宽度固定.这种方法只适用于制作单色圆角框.本实例文件位于网页学习网CSS教程资源中“第11章\01\basic.htm”. 图1 圆角框案例效果 ① 使用这种方法首先要确定圆角框的颜色,以及圆角框后面的网页背景的颜色,然后根据这两种颜色制作两个图像文件,如图2所示.例如,这里的网页背景为白色,圆角框为咖啡色

11.4 “5图形”二维滑动门经典圆角框

11.3节介绍的不固定宽度的圆角框制作方法只适用于单色的圆角框,对于带有复杂边框的圆角框就不适用了. 另外,还需要考虑一个问题,用11.3节介绍的方法制作的圆角框,尽管可以适应不同宽度,但是它里面的正文段落也承担了设置圆角框布局的任务.也就是说,圆角框中的正文并不是独立的,正文内容不能自由地设置样式.这对于通用型的网页来说,局限性很大:例如,如果较为复杂的页面,每个圆角框用于放置不同的栏目,希望达到的目标应该是可以在每个圆角框中放置任何内容,并且可以对这些内容设置样式,还能保证圆角框本身显示正确

CSS3 border-radius边框圆角

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提供了5种圆角属性: border-radius :同时设置4个边框的圆角样式. border-top-left-radius :

利用 css 制作简单的提示框

在网页开发中,为了提高用户体验,经常会用到一些提示框来引导用户,这里分享下一些简单的提示框的制作 1.首先类似一个长方形右上角一个关闭按钮 这里用到的主要是一些定位的知识,运用relative和absolute可以快速制作这样的一个提示框,想详细了解,点击这里 html代码: <div id="position"> <div class="position-relative"> <span>提示信息</span> &l