话题 首页 > CSS3 教程 > CSS3 教程话题列表 > 详情

如何利用CSS3打造无图片圆角输入框?

精华
宇文傻姑 2016-11-28 19:23:15 浏览(5078) 回复(6) 赞(0)
谁知道如何实现无图片的圆角输入框吗?好烦恼啊!
css3

回答(6)

施主同西否 精华 2016-11-28

如何实现无图片的圆角输入框这问题没什么好烦恼的,其实利用css3新添加的radius属性 就可以轻松的解决这个问题。代码如下:

<!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>W3Cschool圆角输入框</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="W3Cschool圆角矩形输入框">
</body>
</html>

PS:

-moz(例如上面代码中的: -moz-border-radius:5px; 是firefoe的专有属性; )用于Firefox
-webkit(例如上面代码中的:-webkit-border-radius:5px;  是chrome和safari的专有属性;)用于Safari和Chrome。
当然,万恶的IE6是不支持这个属性的。
冒泡的可乐 2016-12-12

input{border- radius :5px;}

后面的值要看具体情况基本5像素就能出现圆角,但是ie低版本不支持

一笔荒芜 2018-05-31

好慢呀,空空如也,半天不来大神解决,大佬在哪啦

1144100656 2018-05-31

刚学习程序,过来学习学习!!!!...

1152696398 2018-05-31

这个问题我也不清楚,等大佬来解决吧。。

海海520 2018-07-04

input{border- radius :5px;}

要回复,请先登录 或者注册