看了院子里一篇关于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. [设计模式] .NET设计模式笔记 - 了解设计模式

    今天在TerryLee的cnblog(http://terrylee.cnblogs.com)里看到了与设计模式相关的整套文章,初学设计模式看完每篇文章后做些笔记和摘抄. ●什么是设计模式,什么是架构 ...

  2. [Java] webservice soap,wsdl 例子

    java 调用webservice的各种方法总结 现在webservice加xml技术已经逐渐成熟,但要真正要用起来还需时日!! 由于毕业设计缘故,我看了很多关于webservice方面的知识,今天和 ...

  3. UITextField的简单操作和实际应用

    UITestField UITestField* testField = [UITestField alloc]initWithFrame]; /* 设置边框样式 typedef NS_ENUM(NS ...

  4. 【三板斧】Java定位CPU使用高问题

    [三板斧]Java定位CPU使用高问题 1.TOP命令,查询消耗CPU高的进程号 PID,并记录下来,按下键盘"H"键,记录高消耗线程号,并将改线程号转换为十六进制 2.使用 js ...

  5. oneThink 数据库连接失败,总提示密码不对的解决办法

    oneThink的数据库配置文件是\Application\Common\Conf\config.php,按理来说,在这里修改数据库配置应该就可以重新连接,可是不管我怎么修改密码总是和我设置的不一致, ...

  6. Hadoop2.0重启脚本

    Hadoop2.0重启脚本 方便重启带ha的集群,写了这个脚本 #/bin/bash sh /opt/zookeeper-3.4.5-cdh4.4.0/bin/zkServer.sh restart ...

  7. HDU 1598 find the most comfortable road (MST)

    find the most comfortable road Time Limit:1000MS     Memory Limit:32768KB     64bit IO Format:%I64d ...

  8. .net C# 网页播放器 支持多种格式 媒体播放器 播放器 代码

    .avi格式代码片断如下:<object id='video' width='400' height='200' border='0' classid='clsid:CFCDAA03-8BE4- ...

  9. 一步步搭建自己的轻量级MVCphp框架-(三)一个国产轻量级框架Amysql源码分析(2) 进程

    Amysql类 按照我的理解这就是框架的初始化 上代码 class Amysql { public $AmysqlProcess; public function Amysql() { global ...

  10. java创建Date日期时间笔记

    (1)public Date() 创建的日期类对象的日期时间被设置成创建时刻相对应的日期时间. 例: Java代码 1.Date today=new Date();  //today被设置成创建时刻相 ...