看了院子里一篇关于CSS圆角技巧的文章,试了一下,觉得很好,贴出练习的代码。优秀文章链接:

http://www.cnblogs.com/luluping/archive/2010/06/26/1765616.html

圆角效果:

代码:

阴影效果:

代码:

2015.1.28深夜,看到上面以前写的代码,感觉后复杂,刚好看到一本书上介绍了圆角的简单画法,写在下面:(书名:《HTML与CSS入门经典》 by [美] Julie Meloni 这是一位女士)

 <head runat="server">
<title>创建圆角</title>
<style type="text/css">
.rounded
{
background: #00ff00;
border-radius: 90px;
height: 150px;
width: 150px;
}
.rounded1
{
background: red;
border-radius: 50px;
height: 80px;
width: 80px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div class="rounded"> </div>
</form>
</body>

效果图:

CSS圆角效果的更多相关文章

  1. css 圆角效果

    http://intacto10years.com/index_start.php<div style="width:800px; height:1300px;">&l ...

  2. CSS 圆角框

    转载请注明来源:https://www.cnblogs.com/hookjc/ 其实这种圆角框是靠一个个容器堆砌而成的,每一个容器的宽度不同,这个宽度是由margin外边距来实现的,如:margin: ...

  3. css之outline实现圆角效果

    对,你没有看错,outline也可以实现圆角,不过请先读完自然会知道结果: ============================================================== ...

  4. css实现圆角效果

    源码: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> & ...

  5. 使用css3来实现边框圆角效果

    经常看到别人的网站有个边框来修饰文字区域,类似圆角矩形把文字环绕起来,特别有感觉,于是就试着用图片边框来修饰,但是用图片过多会拉慢网页的加载速度,能不能使用css3来实现边框圆角效果呢?当然borde ...

  6. 使IE6同样支持圆角效果

    之前写到过,IE6不支持:hover效果的解决办法,其它这个跟它一样.IE6(7/8)不支持border-radius属性,所以其中的圆角效果显示不出来,可以通过引用ie-css3.htc的方法解决. ...

  7. Android中实现ListView圆角效果[转]

    本文演示如何Android中实现ListView圆角效果. 无论是网站,还是APP,人们都爱看一些新颖的视图效果.直角看多了,就想看看圆角,这几年刮起了一阵阵的圆角设计风:CSS新标准纳入圆角元素,特 ...

  8. 【实用技巧】去除BootStrap所有圆角效果

    满屏的圆角有没有审"美"疲劳啊?教你一键去除所有圆角效果: * { -webkit-border-radius: 0 !important; -moz-border-radius: ...

  9. CSS边框效果

    前面的话 本文将详细介绍CSS边框效果 半透明边框 border:10px solid hsla(0, 0%, 100%,.5); background-clip:padding-box; 缝边效果 ...

随机推荐

  1. iOS---》点击uitableview 的section展开或隐藏

    #import <UIKit/UIKit.h> @interface TestCell : UITableViewCell @property (weak, nonatomic) IBOu ...

  2. 10. Android框架和工具之 AppMsg(消息提示)

    1. AppMsg 优雅的弹出类似Toast的消息提示,支持3种状态Alert(警告),Confirm(确认)以及Info(消息).        2. AppMsg使用: (1)AppMsg下载地址 ...

  3. Java学习笔记——多态性Polymorphism

    Java中实现多态的机制 Java中实现多态的机制靠的是父类或者接口定义的引用变量可以指向子类或者具体的实现类的实例对象,而程序调的方法在运行期才动态绑定,就是引用变量所指向的具体实例对象的方法,也就 ...

  4. 修改tomcat浏览器地址栏图标

    1.准备一张jpg格式的图片 2.去百度:ico图标在线制作(快速入口:http://www.faviconico.org/) 3.将生成的ico图标复制到tomcat的webapps下的ROOT项目 ...

  5. javascript线程解释(setTimeout,setInterval你不知道的事)---转载

    在工作中,可能我们经常遇到在有很多 setInterval 的页面, 再手动触发 setTimeout 的时候经常失败, 尤其是 jquery做动画的时候,一些渐入溅出的东西,很多东西都不被触发……, ...

  6. Kafka删除逻辑

    Kafka的删除逻辑请参见:http://www.cnblogs.com/gaopeng527/p/4950956.html

  7. codeforces 675A A. Infinite Sequence(水题)

    题目链接: A. Infinite Sequence time limit per test 1 second memory limit per test 256 megabytes input st ...

  8. z-index无效

    1.要想给元素设置z-index样式,必须先让它变成定位元素,说的明白一点,就是要给元素设置一个postion:relative(定位元素:position属性值设置除默认值static以外的元素,包 ...

  9. JavaScript引用类型(二)

    Date类型 Javascript中的Date类型是采用Java中的java.util.Date类基础上构建的,使用UTC时间来保存数据,可以精确到1970年1月1日之前或之后的285616年 创建一 ...

  10. hihocoder#1054 : 滑动解锁(深度优先搜索)

    描述 滑动解锁是智能手机一项常用的功能.你需要在3x3的点阵上,从任意一个点开始,反复移动到一个尚未经过的"相邻"的点.这些划过的点所组成的有向折线,如果与预设的折线在图案.方向上 ...