首页 > Web开发 > 详细

[转]利用css3打造无图片圆角输入框

时间:2016-01-19 19:26:10      阅读:217      评论:0      收藏:0      [点我收藏+]

实现无图片的圆角输入框而烦恼吗,其实用css3新添加的radius属性就能轻松结局这个问题。其中-webkit-border-radius: 5px; 是chrome和safari的专有属性,-moz-border-radius: 5px;是firefoe的专有属性,当然,万恶的IE6是不支持这个属性的。

代码如下:

<!DOCTYPE html PUBLIC ‘-//W3C//DTD XHTML 1.0 Transitional//EN‘ ‘http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd‘>

<html xmlns=‘http://www.w3.org/1999/xhtml‘>

<head>

<meta http-equiv=‘Content-Type‘ content=‘text/html; charset=utf-8‘ />

<title>圆角输入框</title>

<style>

input {

background: #fff; border: 1px solid #000;

padding: 5px;

border-radius: 5px;

-webkit-border-radius: 5px;

-moz-border-radius: 5px;

}

</style>

</head>

<body>

<input class=‘inout‘ name=‘inout‘ type=‘text‘ value=‘‘>

</body>

</html>

[转]利用css3打造无图片圆角输入框

原文:http://www.cnblogs.com/niusir/p/5143028.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!