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 clip-path 用法介绍详解
Mar 01 HTML / CSS
css3动画事件—webkitAnimationEnd与计时器time事件
Jan 31 HTML / CSS
css3 给页面加个半圆形导航条主要利用旋转和倾斜样式
Feb 10 HTML / CSS
使用CSS3和Checkbox实现JQuery的一些效果
Aug 03 HTML / CSS
利用CSS3的border-radius绘制太极及爱心图案示例
May 17 HTML / CSS
传统HTML页面实现模块化加载的方法
Oct 15 HTML / CSS
解锁canvas导出图片跨域的N种姿势小结
Jan 24 HTML / CSS
解决HTML5中滚动到底部的事件问题
Aug 22 HTML / CSS
webView加载html图片遇到的问题解决
Oct 08 HTML / CSS
HTML5 3D旋转相册的实现示例
Dec 03 HTML / CSS
canvas简单连线动画的实现代码
Feb 04 HTML / CSS
html form表单基础入门案例讲解
Jul 15 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
使用字符串函数输出整数化的PHP版本号
2006/10/09 PHP
PHP 实用代码收集
2010/01/22 PHP
php使用正则过滤js脚本代码实例
2014/05/10 PHP
搭建Vim为自定义的PHP开发工具的一些技巧
2015/12/11 PHP
php 多文件上传的实现实例
2016/10/23 PHP
Laravel5.5 数据库迁移:创建表与修改表示例
2019/10/23 PHP
Fastest way to build an HTML string(拼装html字符串的最快方法)
2011/08/20 Javascript
关于js日期转化为毫秒数“节省20%的效率和和节省9个字符“问题
2012/03/01 Javascript
利用jquery包将字符串生成二维码图片
2013/09/12 Javascript
js 高效去除数组重复元素示例代码
2013/12/19 Javascript
改变隐藏的input中value的值代码
2013/12/30 Javascript
js实现非常简单的焦点图切换特效实例
2015/05/07 Javascript
jQuery简单实现仿京东商城的左侧菜单效果代码
2015/09/09 Javascript
利用jQuery实现CheckBox全选/全不选/反选的简单代码
2016/05/31 Javascript
JS获取当前使用的浏览器名字以及版本号实现方法
2016/08/19 Javascript
js对字符串进行编码的方法总结(推荐)
2016/11/10 Javascript
js调用刷新界面的几种方式
2017/05/03 Javascript
微信小程序实现tab切换效果
2017/11/21 Javascript
Phaser.js实现简单的跑酷游戏附源码下载
2018/10/26 Javascript
jenkins自动构建发布vue项目的方法步骤
2021/01/04 Vue.js
Python itertools模块详解
2015/05/09 Python
python学习笔记--将python源文件打包成exe文件(pyinstaller)
2018/05/26 Python
Python Selenium 之关闭窗口close与quit的方法
2019/02/13 Python
python使用opencv对图像mask处理的方法
2019/07/05 Python
如何爬取通过ajax加载数据的网站
2019/08/15 Python
Python使用QQ邮箱发送邮件报错smtplib.SMTPAuthenticationError
2019/12/20 Python
使用BeautifulSoup4解析XML的方法小结
2020/12/07 Python
AmazeUI 面板的实现示例
2020/08/17 HTML / CSS
如何做好总经理助理
2013/11/12 职场文书
施工安全协议书
2013/12/11 职场文书
2014年教师培训的自我评价
2014/01/03 职场文书
小区门卫值班制度
2014/01/24 职场文书
摄影专业毕业生求职信
2014/08/05 职场文书
2015年学校医务室工作总结
2015/07/20 职场文书
如何把新闻人物写得立体、鲜活?
2019/08/14 职场文书
详解java如何集成swagger组件
2021/06/21 Java/Android