CSS3使用border-radius属性制作圆角


Posted in HTML / CSS onDecember 22, 2014

html

复制代码
代码如下:

<link href="test.css" type="text/css" rel="stylesheet" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<div class="loginbox">
<h2>邮箱登录</h2>
<ul>
<li><input type="text" value="邮箱账号" class="account" /><input type="button" value="@qq.com" class="mail_btn" /></li>
<li><input type="text" value="密码" /></li>
</ul>
</div>

使用border-radius属性,制作圆角

复制代码
代码如下:

/*CSS3.0圆角属性实现表单元素圆角*/
.loginbox{

background:#edf6ff;

border-left:1px solid #acc3e3;

border-right:1px solid #acc3e3;

padding:20px;
}
.loginbox h2{

color:#28456f;

font-size:14px;
}
.loginbox ul{

margin-top:10px;
}
.loginbox li{

margin-bottom:10px;

list-style-type:none;
}
.loginbox li input{

border:1px solid #9dadc6;

border-radius:6px;

height:32px;

padding:0 5px;

color:#888;

width:292px;
}
.loginbox li input.account{

width:182px;

border-right:1px solid #d5deed;

border-top-right-radius:0;

border-bottom-right-radius:0;

background:-moz-linear-gradient( top,#ddd 0%,#eee 10%,#fff 20%);

background:-webkit-linear-gradient( top,#ddd 0%,#eee 10%,#fff 20%);

background:-ms-linear-gradient( top,#ddd 0%,#eee 10%,#fff 20%);
}
.loginbox li input.mail_btn{

width:110px;

height:34px;

border-top-left-radius:0;

border-bottom-left-radius:0;

color:#504c4d;

text-align:left;

cursor:pointer;
}

代码很简洁,效果却很棒,CSS3你值得拥有!!!!

HTML / CSS 相关文章推荐
CSS3 box-sizing属性
Apr 17 HTML / CSS
基于css3仿造window7的开始菜单
Jun 17 HTML / CSS
CSS3 制作旋转的大风车(充满童年回忆)
Jan 30 HTML / CSS
一款基于css3和jquery实现的动画显示弹出层按钮教程
Jan 04 HTML / CSS
使用CSS3制作一个简单的Chrome模拟器
Jul 15 HTML / CSS
CSS3 二级导航菜单的制作的示例
Apr 02 HTML / CSS
利用CSS3实现文字折纸效果实例代码
Jul 10 HTML / CSS
CSS3 实现的缩略图悬停效果
Dec 09 HTML / CSS
HTML5教程之html 5 本地数据库(Web Sql Database)
Apr 03 HTML / CSS
Amaze UI 文件选择域的示例代码
Aug 26 HTML / CSS
如何通过 CSS 写出火焰效果
Mar 24 HTML / CSS
前端使用svg图片改色实现示例
Jul 23 HTML / CSS
CSS3 实现侧边栏展开收起动画
Dec 22 #HTML / CSS
css3选择器基本介绍
Dec 15 #HTML / CSS
css3的transition属性详解
Dec 15 #HTML / CSS
CSS3 @font-face属性使用指南
Dec 12 #HTML / CSS
CSS3简单实现照片墙
Dec 12 #HTML / CSS
一款纯css3实现的竖形二级导航的实例教程
Dec 11 #HTML / CSS
一款利用纯css3实现的win8加载动画的实例分析
Dec 11 #HTML / CSS
You might like
Mysql中limit的用法方法详解与注意事项
2008/04/19 PHP
学习php设计模式 php实现观察者模式(Observer)
2015/12/09 PHP
thinkPHP多表查询及分页功能实现方法示例
2017/07/03 PHP
php使用array_chunk函数将一个数组分割成多个数组
2018/12/05 PHP
JavaScript中两种链式调用实现代码
2011/01/12 Javascript
JS中处理与当前时间间隔的函数代码
2012/05/23 Javascript
javascript学习笔记(一) 在html中使用javascript
2012/06/18 Javascript
jquery基础教程之deferred对象使用方法
2014/01/22 Javascript
jQuery实现输入框下拉列表树插件特效代码分享
2015/08/27 Javascript
JavaScript的History API使搜索引擎抓取AJAX内容
2015/12/07 Javascript
javascript类型系统 Window对象学习笔记
2016/01/07 Javascript
微信小程序 富文本转文本实例详解
2016/10/24 Javascript
Angularjs使用ng-repeat中$even和$odd属性的注意事项
2016/12/31 Javascript
vue2实现移动端上传、预览、压缩图片解决拍照旋转问题
2017/04/13 Javascript
bootstrap轮播图示例代码分享
2017/05/17 Javascript
微信小程序开发之animation循环动画实现的让云朵飘效果
2017/07/14 Javascript
Vue中使用vue-i18插件实现多语言切换功能
2018/04/25 Javascript
Javascript 对象(object)合并操作实例分析
2019/07/30 Javascript
Openlayers实现扩散的动态点(水纹效果)
2020/08/17 Javascript
利用numpy+matplotlib绘图的基本操作教程
2017/05/03 Python
Python2.7 实现引入自己写的类方法
2018/04/29 Python
python读取txt文件并取其某一列数据的示例
2019/02/19 Python
python修改linux中文件(文件夹)的权限属性操作
2020/03/05 Python
python 使用elasticsearch 实现翻页的三种方式
2020/07/31 Python
解决python3中os.popen()出错的问题
2020/11/19 Python
IE下实现类似CSS3 text-shadow文字阴影的几种方法
2011/05/11 HTML / CSS
《厄运打不垮的信念》教学反思
2014/04/13 职场文书
给校长的建议书100字
2014/05/16 职场文书
世界读书日的活动方案
2014/08/20 职场文书
2014预防青少年违法犯罪工作总结
2014/12/10 职场文书
创先争优承诺书
2015/01/20 职场文书
导游词之韩国济州岛
2019/10/28 职场文书
Python实现简单的猜单词
2021/06/15 Python
如何理解python接口自动化之logging日志模块
2021/06/15 Python
解决mysql模糊查询索引失效问题的几种方法
2021/06/18 MySQL
css实现左上角飘带效果的完整代码
2022/03/18 HTML / CSS