设置文本框：四个直角边变为圆角(border-top-left-radius)

最新推荐文章于 2024-04-24 17:04:10 发布

ZERO960303

最新推荐文章于 2024-04-24 17:04:10 发布

阅读量4.6k

点赞数 2

radius，就是半径的意思。用这个属性可以很容易做出圆角效果，当然，也可以做出圆形效果。原理很简单，“正方形的内切圆的半径等于正方形边长的一半”。

要想让文本框边角变得圆滑美观，主要是使用CSS3 border-top-left-radius 属性。

如图：

代码如下：

帐号：<input class="text" name="UserName" maxlength="30" style="border-color:blue; border-top-left-radius: 5px; border-top-right-radius: 5px; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; background-color: rgb(245,248,250); color: rgb(153, 153, 153); font-weight: normal; position:relative; background-position: initial initial; background-repeat: initial initial;" value="" default_txt="帐号" type="text">

密码：<input class="text" style="border-color:blue; border-top-left-radius: 5px; border-top-right-radius: 5px; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; background-color: rgb(245,248,250); color: rgb(153, 153, 153); position: relative; background-position: initial initial; background-repeat: initial initial;" id="txtPassword" tabindex="2" name="Password" maxlength="30" default_txt="密码" type="password">

【红色代码就是设置文本框四个边角】

background-position 属性设置背景图像的起始位置

background-repeat 属性定义了图像的平铺模式

语法：

border-radius ： none | <length>{1,4} [ / <length>{1,4} ]?

相关属性： border-top-right-radius , border-top-left-radius , border-bottom-right-radius , border-bottom-left-radius ,

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

<head>

<title>在HTML中如何把块的边框做成圆角</title>

.a {

background-color: #c7dec6;

border: 1px solid #000;

border-top-left-radius: 10px;

border-top-right-radius: 10px;

border-bottom-left-radius: 10px;

border-bottom-right-radius: 10px;

height:200px;

width:500px;

padding:20px;

}

</style>

</head>

<body>

在HTML中如何把块的边框做成圆角

</p>

</body>

</html>

样式注释

各个边角的样式分开显示：

border-top-left-radius: 10px;左上部边框圆角10个像素

border-top-right-radius: 10px;右上部边框圆角10个像素

border-bottom-left-radius: 10px;左下部边框圆角10个像素

border-bottom-right-radius: 10px;右下部边框圆角10个像素

全部边角一个样式：border-radius: 10px;所有边框圆角10个像素

ZERO960303

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
设置文本框：四个直角边变为圆角(border-top-left-radius)

radius，就是半径的意思。用这个属性可以很容易做出圆角效果，当然，也可以做出圆形效果。原理很简单，“正方形的内切圆的半径等于正方形边长的一半”。要想让文本框边角变得圆滑美观，主要是使用CSS3 border-top-left-radius 属性。如图：代码如下：帐号： name="UserName" maxlength="30"
复制链接

扫一扫