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 相关文章推荐
利用CSS的Sass预处理器(框架)来制作居中效果
Mar 10 HTML / CSS
CSS3实战第一波 让我们尽情的圆角吧
Aug 27 HTML / CSS
CSS3中伪元素::before和::after的用法示例
Sep 18 HTML / CSS
使用纯 CSS 创作一个脉动 loader效果的源码
Sep 28 HTML / CSS
浅析CSS3 用text-overflow解决文字排版问题
Oct 28 HTML / CSS
如何让IE9以下版本(ie6/7/8)认识html5元素
Apr 01 HTML / CSS
HTML5验证以及日期显示的实现详解
Jul 05 HTML / CSS
html5 viewport使用方法示例详解
Dec 02 HTML / CSS
html5的自定义data-*属性与jquery的data()方法的使用
Jul 02 HTML / CSS
AmazeUI 平滑滚动效果的示例代码
Aug 20 HTML / CSS
使用Html+Css实现简易导航栏功能(导航栏遇到鼠标切换背景颜色)
Apr 07 HTML / CSS
sass 常用备忘案例详解
Sep 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
Ha0k 0.3 PHP 网页木马修改版
2009/10/11 PHP
PHP清除数组中所有字符串两端空格的方法
2014/10/20 PHP
PHP实现抓取HTTPS内容
2014/12/01 PHP
php使用simplexml_load_file加载XML文件并显示XML的方法
2015/03/19 PHP
浅析PHP中Session可能会引起并发问题
2015/07/23 PHP
PHP中串行化用法示例
2016/11/16 PHP
php数值计算num类简单操作示例
2020/05/15 PHP
jQuery学习5 jQuery事件模型
2010/02/07 Javascript
使用nodejs、Python写的一个简易HTTP静态文件服务器
2014/07/18 NodeJs
javascript 用函数实现继承详解
2016/05/28 Javascript
JS中sort函数排序用法实例分析
2016/06/16 Javascript
jQuery操作之效果详解
2017/05/19 jQuery
JavaScript DOM元素常见操作详解【添加、删除、修改等】
2018/05/09 Javascript
详解微信小程序实现WebSocket心跳重连
2018/07/31 Javascript
python实现文件分组复制到不同目录的例子
2014/06/04 Python
Python的Flask框架中web表单的教程
2015/04/20 Python
python函数的5种参数详解
2017/02/24 Python
Python算术运算符实例详解
2017/05/31 Python
python中is与双等于号“==”的区别示例详解
2017/11/21 Python
在PyCharm中实现关闭一个死循环程序的方法
2018/11/29 Python
python的pytest框架之命令行参数详解(上)
2019/06/27 Python
PyTorch中Tensor的维度变换实现
2019/08/18 Python
jupyternotebook 撤销删除的操作方式
2020/04/17 Python
使用keras实现Precise, Recall, F1-socre方式
2020/06/15 Python
手把手教你将Flask应用封装成Docker服务的实现
2020/08/19 Python
使用python-cv2实现视频的分解与合成的示例代码
2020/10/26 Python
css 省略号 css3让多余的字符串消失并附加省略号的实现代码
2013/02/07 HTML / CSS
LINUX下线程,GDI类的解释
2012/04/17 面试题
婚礼司仪主持词
2014/03/14 职场文书
品质标语大全
2014/06/21 职场文书
房屋鉴定委托书范本
2014/09/23 职场文书
毕业论文致谢怎么写
2015/05/14 职场文书
跳高加油稿
2015/07/21 职场文书
商业计划书之服装
2019/09/09 职场文书
python Polars库的使用简介
2021/04/21 Python
JavaScript展开运算符和剩余运算符的区别详解
2022/02/18 Javascript