网站建设资讯

NEWS

网站建设资讯

CSS3使用border-radius属性制作圆角代码分享

本篇内容主要讲解“CSS3使用border-radius属性制作圆角代码分享”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“CSS3使用border-radius属性制作圆角代码分享”吧!

创新互联公司 - 雅安移动机房,四川服务器租用,成都服务器租用,四川网通托管,绵阳服务器托管,德阳服务器托管,遂宁服务器托管,绵阳服务器托管,四川云主机,成都云主机,西南云主机,雅安移动机房,西南服务器托管,四川/成都大带宽,成都机柜租用,四川老牌IDC服务商

html

代码如下:





   

邮箱登录


   

           

  •        

  •    

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

代码如下:


/*CSS3.0圆角属性实现表单元素圆角*/
.loginbox{
background:#edf6ff;
border-left:1px solid #acc3e3;
border-right:1px solid #acc3e3;
padding:20px;
}
.loginbox h3{
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使用border-radius属性制作圆角代码分享”有了更深的了解,不妨来实际操作一番吧!这里是创新互联网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!


分享标题:CSS3使用border-radius属性制作圆角代码分享
文章转载:http://njwzjz.com/article/pocooo.html