html文本框怎么用css变圆角

html-css06

html文本框怎么用css变圆角,第1张

border-radius属性可以实现元素的圆角。如下css可以实现文本框（单行、多行）的圆角：

input[type=text],textarea{border-radius:3pxborder:1px solid #000}

border-radius用法如下：

border-radius 属性是一个简写属性，用于设置四个 border-*-radius 属性。

该属性允许为元素添加圆角边框

语法：

border-radius: 1-4 length|% / 1-4 length|%

按此顺序设置每个 radius 的四个值。

如果省略 bottom-left，则与 top-right 相同。

如果省略 bottom-right，则与 top-left 相同。

如果省略 top-right，则与 top-left 相同。

单位一般用px和百分比较多，其他单位也可

用css样式为html元素设置圆角框是利用border-radius属性实现的。

1、html代码：

<!DOCTYPE html>

<html>

<head>

<style>

div

{

text-align:center

border:2px solid #a1a1a1

padding:10px 40px

background:#dddddd

width:350px

border-radius:25px

-moz-border-radius:25px/* 老的 Firefox */

}

</style>

</head>

<body>

<div>border-radius 属性允许您向元素添加圆角。</div>

</body>

</html>

2、css代码：

div

{

text-align:center

border:2px solid #a1a1a1

padding:10px 40px

background:#dddddd

width:350px

border-radius:25px

-moz-border-radius:25px/* 老的 Firefox */

}

3、实现效果：