用css写一个长方形文本框,背景色为渐变紫,四个角为圆形
时间: 2024-03-18 07:40:41 浏览: 115
可以使用以下代码实现:
```css
.rectangle {
width: 300px;
height: 150px;
background: linear-gradient(to bottom right, #8a2be2, #4b0082);
border-radius: 20px;
padding: 20px;
}
```
解释一下:
- `width` 和 `height` 分别设置长方形的宽度和高度。
- `background` 使用 `linear-gradient` 创建了一个从左上角到右下角的渐变色背景,颜色分别为紫色 `#8a2be2` 和深紫色 `#4b0082`。
- `border-radius` 设置了四个角的圆角大小为 20px。
- `padding` 是为了让文本在长方形内部有一定的间距,使得视觉效果更好。
将这段代码应用到一个 HTML 元素上,就可以得到一个带有渐变紫色背景和圆角的长方形文本框了:
```html
<div class="rectangle">
<p>这是一个长方形文本框。</p>
</div>
```
相关问题
vue 长方形文本框 切右上角
你可以使用 CSS 的伪类 `::before` 和 `::after` 来实现切角效果,具体实现方法如下:
```html
<div class="input-wrapper">
<input type="text" placeholder="请输入文本">
</div>
```
```css
.input-wrapper {
position: relative;
display: inline-block;
}
.input-wrapper::before {
content: "";
position: absolute;
top: -10px;
right: -10px;
border-top: 10px solid transparent;
border-right: 10px solid #ccc;
}
.input-wrapper::after {
content: "";
position: absolute;
top: -11px;
right: -11px;
border-top: 11px solid transparent;
border-right: 11px solid #fff;
}
input[type="text"] {
border: 1px solid #ccc;
padding: 10px;
}
```
这段 CSS 代码中,`::before` 伪类用来绘制灰色的三角形,`::after` 伪类用来绘制白色的三角形,从而实现切角效果。同时,我们为文本框添加了 `border` 和 `padding` 样式,使其成为一个长方形文本框。你可以根据实际情况调整三角形的大小和颜色,以及文本框的边框和内边距。
阅读全文