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

实现无图片的圆角输入框而烦恼吗,其实用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>

posted @ 2016-01-19 18:19  NBBLOGS  阅读(237)  评论(1编辑  收藏  举报