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实现图片遮罩效果鼠标hover以后出现文字
Nov 05 HTML / CSS
CSS3 flex布局之快速实现BorderLayout布局
Dec 03 HTML / CSS
详解CSS3选择器:nth-child和:nth-of-type之间的差异
Sep 18 HTML / CSS
Web时代变迁及html5与html4的区别
Jan 06 HTML / CSS
整理HTML5移动端开发的常用触摸事件
Apr 15 HTML / CSS
纯HTML5+CSS3制作生日蛋糕(代码易懂)
Nov 16 HTML / CSS
HTML5 source标签:媒介元素定义媒介资源
Jan 29 HTML / CSS
HTML5自定义属性的问题分析
Aug 16 HTML / CSS
canvas小画板之平滑曲线的实现
Aug 12 HTML / CSS
详解如何使用rem或viewport进行移动端适配
Aug 14 HTML / CSS
z-index不起作用
Mar 31 HTML / CSS
基于CSS制作创意端午节专属加载特效
Jun 01 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小经验:解析preg_match与preg_match_all 函数
2013/06/29 PHP
PHP的fsockopen、pfsockopen函数被主机商禁用的解决办法
2014/07/08 PHP
Linux下PHP安装mcrypt扩展模块笔记
2014/09/10 PHP
php多重接口的实现方法
2015/06/20 PHP
ASP中用Join和Array,可以加快字符连接速度的代码
2007/08/22 Javascript
js中的cookie的读写操作示例详解
2014/04/17 Javascript
nodejs获取本机内网和外网ip地址的实现代码
2014/06/01 NodeJs
百度UEditor编辑器如何关闭抓取远程图片功能
2015/03/03 Javascript
jQuery+html5实现div弹出层并遮罩背景
2015/04/15 Javascript
javascript关于运动的各种问题经典总结
2015/04/27 Javascript
js兼容火狐获取图片宽和高的方法
2015/05/21 Javascript
你所未知的3种Node.js代码优化方式
2016/02/25 Javascript
关于cookie的初识和运用(js和jq)
2016/04/07 Javascript
node puppeteer(headless chrome)实现网站登录
2018/05/09 Javascript
小程序自定义组件实现城市选择功能
2018/07/18 Javascript
Vue-cli项目部署到Nginx服务器的方法
2019/11/01 Javascript
vue-video-player 断点续播的实现
2021/02/01 Vue.js
PHP魔术方法__ISSET、__UNSET使用实例
2014/11/25 Python
使用wxPython获取系统剪贴板中的数据的教程
2015/05/06 Python
Pycharm技巧之代码跳转该如何回退
2017/07/16 Python
python+matplotlib实现动态绘制图片实例代码(交互式绘图)
2018/01/20 Python
kafka-python批量发送数据的实例
2018/12/27 Python
python调用百度地图WEB服务API获取地点对应坐标值
2019/01/16 Python
python实现按行分割文件
2019/07/22 Python
python输入一个水仙花数(三位数) 输出百位十位个位实例
2020/05/03 Python
利用python控制Autocad:pyautocad方式
2020/06/01 Python
详解Java中一维、二维数组在内存中的结构
2021/02/11 Python
基于PyInstaller各参数的含义说明
2021/03/04 Python
马来西亚时装购物网站:ZALORA马来西亚
2017/03/14 全球购物
企业宣传工作方案
2014/06/02 职场文书
酒店爱岗敬业演讲稿
2014/09/02 职场文书
2014年节能降耗工作总结
2014/12/11 职场文书
组织生活会发言材料
2014/12/15 职场文书
英文升职感谢信
2015/01/23 职场文书
雷锋的故事观后感
2015/06/10 职场文书
团队执行力培训心得体会
2015/08/15 职场文书