看了院子里一篇关于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-UIPickerView基本使用

    #import "ViewController.h" @interface ViewController ()<UIPickerViewDataSource,UIPicker ...

  2. 【Shell脚本学习5】第一个Shell脚本

    打开文本编辑器,新建一个文件,扩展名为sh(sh代表shell),扩展名并不影响脚本执行,见名知意就好,如果你用php写shell 脚本,扩展名就用php好了. 输入一些代码: #!/bin/bash ...

  3. VS2008/MVC2 项目迁移到 VS2013/MVC4

    第1步.MVC2 => MVC3 手动处理可以参考这个: http://www.asp.net/whitepapers/mvc3-release-notes#upgrading 使用工具 ASP ...

  4. 剑指Offer24 复杂链表的复制

    /************************************************************************* > File Name: 24_Comple ...

  5. 【转】亿欧盘点:杭州十家代表性O2O企业

    [ 亿欧导读 ] 11月13日亿欧网将走入杭州,联合B座12楼.正和岛召开“2014 中国O2O新商业峰会“.亿欧网据O2O产业图谱,整理出杭州十家O2O企业:点我吧.快的打车.杭州19楼.婚礼纪.淘 ...

  6. 瀑布流布局--原生JavaScript

    HTML(注意包裹关系,方便js调用) <body> <div id="main"> <div class="box"> & ...

  7. CefSharp 发布后在客户机上报找不到dll的问题

    两个因素:一是与项目平台属性的选择要一致二是需要安装CefSharp对应的的VC++可发行组件包(用包管理器引用了此DLL后,会有一个readme.txt,上面详细介绍了CefSharp所需要的环境要 ...

  8. php学习笔记6--php中的文件包含 include,require,include_once,require_once

    php中的文件包含 include,require,include_once,require_once 文件包含:是指将一个文件的内容包含进另外一个文件,有利于代码的复用等.php中文件包含指令有4个 ...

  9. linux中mail函数不能发送邮件

    没有安装或启动 sendmail 组件 解决办法 我是新手,命令不熟,所以写的很详细,老鸟勿喷哦 1.重新安装 sendmail 组件,我用的是 CentOS ,使用下面的命令安装 代码如下 复制代码 ...

  10. C#中Messagebox.Show()常用参数用法详解

    声明:IWin32Window owner   ,  HelpNavigator navigator ,    string keyword 上面的三个参数类型不是很了解.没有做讨论. 等以后了解多了 ...