用css写一个长方形文本框,背景色为渐变紫,四个角为圆形
时间: 2024-03-18 13:40:41 浏览: 19
可以使用以下代码实现:
```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>
```
相关问题
css写一个长方形盒子底部两个角为反圆角
可以使用 CSS 的 border-radius 属性来实现盒子的圆角效果,同时使用 :before 和 :after 伪元素来实现底部的反圆角效果,如下所示:
```css
.box {
width: 200px;
height: 100px;
background-color: #f2f2f2;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
position: relative;
}
.box:before,
.box:after {
content: "";
position: absolute;
height: 20px;
bottom: -20px;
background-color: #f2f2f2;
}
.box:before {
left: -10px;
border-bottom-left-radius: 10px;
}
.box:after {
right: -10px;
border-bottom-right-radius: 10px;
}
```
这样就可以实现一个底部两个角为反圆角的长方形盒子。
css设计一个只有轮廓,背景色为透明的五角星,
可以使用 CSS 的伪元素 ::before 和 ::after 来实现一个只有轮廓,背景色为透明的五角星。具体代码如下:
```css
.star {
position: relative;
width: 0;
height: 0;
border-style: solid;
border-width: 0 50px 86.6px 50px;
border-color: transparent transparent #000 transparent;
transform: rotate(35deg);
}
.star::before {
position: absolute;
content: "";
width: 0;
height: 0;
border-style: solid;
border-width: 0 35px 61.0px 35px;
border-color: transparent transparent #fff transparent;
transform: rotate(-35deg);
}
.star::after {
position: absolute;
content: "";
width: 0;
height: 0;
border-style: solid;
border-width: 0 25px 43.3px 25px;
border-color: transparent transparent #000 transparent;
transform: rotate(35deg);
}
```
在 HTML 中,只需要添加一个 class 为 "star" 的 div 即可:
```html
<div class="star"></div>
```
这样就可以实现一个只有轮廓,背景色为透明的五角星了。