看了院子里一篇关于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. Java快速入门

    Java 是什么? Java 的特点: 面向对象 平台无关(跨平台): 简单 安全 体系结构 - 中性 可移植 健壮 多线程 解释型 高性能 分布式 动态 Java环境设置: Java SE可免费提供 ...

  2. php 笔试面试 总结

    一次小小的笔试面试经历,虽然是一些简单的问题,但是自己在这儿总结一下,也查一些资料,得出一些较好的答案,也能帮助自己成长. 1.自己熟悉的http状态码及其意义 其实这个题答案随处可见.这儿也还是记录 ...

  3. amoeba实现MySQL读写分离

    amoeba实现MySQL读写分离 准备环境:主机A和主机B作主从配置,IP地址为192.168.131.129和192.168.131.130,主机C作为中间件,也就是作为代理服务器,IP地址为19 ...

  4. 人体时钟hone hone clock

    摘要:一个由日本人设计的有意思的Flash时钟:人体时钟 hone hone clock .安装很简单,直接js导入即可,包括两种样式:透明背景和白色背景. 很可爱的一个设计,实现后效果如下: 使用方 ...

  5. 常用 CSS 中文字体 Unicode 编码表

    为什么要在CSS中设置字体用字体 Unicode 编码 在 CSS 中设置字体名称,直接写中文是可以的.但是在文件编码(GB2312.UTF-8 等)不匹配时会产生乱码的错误. 为此,在 CSS直接使 ...

  6. 原生js显示分页效果

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  7. 剑指Offer40 和为s的连续正数序列

    /************************************************************************* > File Name: 40_Contin ...

  8. php用curl获取远端网页内容

    <?php $url="http://www.baidu.com";$cc=curl_init(); curl_setopt($cc,CURLOPT_URL,$url); c ...

  9. date & dirname

    date 年:+%Y 月:+%m 日:+%d 时:+%H 或者 +%k 分:+%M 秒:+%S 周:+%w dirname 目录 获取目录的上级目录

  10. canvas基础2--绘制图形

    栅格 绘制矩形 不同于SVG,HTML中的元素canvas只支持一种原生的图形绘制:矩形.所有其他的图形的绘制都至少需要生成一条路径.不过,我们拥有众多路径生成的方法让复杂图形的绘制成为了可能. 首先 ...