使用 CSS 可以实现各种形状和对齐方式的文本框。其中,关键的属性有:
border-radius:设置边框的圆角半径,可以实现圆形、椭圆形和不规则形状的文本框。
border-radius: 50%; /* 实现圆形 */
border-radius: 10px / 20px; /* 实现椭圆形 */
border-radius: 10px 20px 30px 40px; /* 实现不规则形状 */
text-align:设置文本的对齐方式,可以实现水平和垂直居中对齐。
text-align: center; /* 水平居中 */
line-height: 200px; /* 高度为200px的容器中,实现垂直居中对齐 */
display:设置元素的显示方式,可以实现块级元素和内联元素的转换。
display: block; /* 将元素转换为块级元素 */
display: inline-block; /* 将元素转换为内联块级元素 */
position:设置元素的定位方式,可以实现绝对定位和相对定位。
position: absolute; /* 设置元素的绝对定位 */
position: relative; /* 设置元素的相对定位 */
通过以上关键属性的组合,可以实现各种形状和对齐方式的文本框。例如,实现一个圆形、水平垂直居中对齐的文本框,代码如下:
.container {
width: 200px;
height: 200px;
border-radius: 50%;
text-align: center;
line-height: 200px;
background-color: #ccc;
}