CSS圆角效果
看了院子里一篇关于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圆角效果的更多相关文章
- css 圆角效果
http://intacto10years.com/index_start.php<div style="width:800px; height:1300px;">&l ...
- CSS 圆角框
转载请注明来源:https://www.cnblogs.com/hookjc/ 其实这种圆角框是靠一个个容器堆砌而成的,每一个容器的宽度不同,这个宽度是由margin外边距来实现的,如:margin: ...
- css之outline实现圆角效果
对,你没有看错,outline也可以实现圆角,不过请先读完自然会知道结果: ============================================================== ...
- css实现圆角效果
源码: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> & ...
- 使用css3来实现边框圆角效果
经常看到别人的网站有个边框来修饰文字区域,类似圆角矩形把文字环绕起来,特别有感觉,于是就试着用图片边框来修饰,但是用图片过多会拉慢网页的加载速度,能不能使用css3来实现边框圆角效果呢?当然borde ...
- 使IE6同样支持圆角效果
之前写到过,IE6不支持:hover效果的解决办法,其它这个跟它一样.IE6(7/8)不支持border-radius属性,所以其中的圆角效果显示不出来,可以通过引用ie-css3.htc的方法解决. ...
- Android中实现ListView圆角效果[转]
本文演示如何Android中实现ListView圆角效果. 无论是网站,还是APP,人们都爱看一些新颖的视图效果.直角看多了,就想看看圆角,这几年刮起了一阵阵的圆角设计风:CSS新标准纳入圆角元素,特 ...
- 【实用技巧】去除BootStrap所有圆角效果
满屏的圆角有没有审"美"疲劳啊?教你一键去除所有圆角效果: * { -webkit-border-radius: 0 !important; -moz-border-radius: ...
- CSS边框效果
前面的话 本文将详细介绍CSS边框效果 半透明边框 border:10px solid hsla(0, 0%, 100%,.5); background-clip:padding-box; 缝边效果 ...
随机推荐
- 【鬼脸原创】github搭建动态网站
a{ color:blue; font-weight:bold; } #cnblogs_post_body ol li { list-style-type: cjk-ideographic; } p[ ...
- Spring学习总结四——SpringIOC容器四
一:spring容器给bean对象注入属性值 1:注入基本属性值 a. 创建MessageBean类: /** * */ package com.hlcui.dao; /** * @author Ad ...
- WGS84坐标系下,经纬度如何换算成米
参考博客:显示瓦片地图 http://www.cnblogs.com/rhinoxy/p/4995731.html 注意:这里的计算方法精度相差比较大,不满足精确计算的需要. 需要理解的GIS概念: ...
- sqlserver跟踪
本文以实际应用为目的,不在理论方面深究 1.打开跟踪器 或 2.新建跟踪-事件选择-列筛选器,HostName默认不显示,需勾选“显示所有列”,如果希望只跟踪某一客户端,可按下面的设置HostName ...
- html5 requestAnimationFrame制作动画:旋转风车
详细内容请点击 在以往,我们在网页上制作动画效果的时候,如果是用javascript实现,一般都是通过定时器和间隔来实现的,出现HTML5之后,我们还可以用CSS3 的transitions和anim ...
- 【CSS3】---结构性伪类选择器-root+not+empty+target
结构性伪类选择器—root :root选择器,从字面上我们就可以很清楚的理解是根选择器,他的意思就是匹配元素E所在文档的根元素.在HTML文档中,根元素始终是<html>. 示例演示: 通 ...
- Developers, do consider different user roles! - A bad experience with cron
The Story: Last week, I found one of our embedded arm linux device ran out of flash space( totally ...
- 1 ubuntu下装setuptools
setuptools可以让程序员更方便的创建和发布 Python 包,特别是那些对其它包具有依赖性的状况,分享以下我在ubuntu下装setuptools的过程 系统:ubuntu 语言:python ...
- javascript中的闭包。
function todo() { var var1 = 1; (function () { var var2 = var1 + 1; alert(var2); })(); } todo(); (fu ...
- 零基础Android学习笔记-01 安卓开发环境搭建
安卓开发环境搭建. 1.首先准备JDK,从官网找到JDK下载地址,原来做.NET不熟悉JAVA,干脆用最新的,下载了JDK 1.7的版本.原来装过1.5还要配置环境变量什么的.但1.7好像很给力,装好 ...