如何画一个圆,背景颜色为白色css
时间: 2023-06-02 20:03:30 浏览: 64
您可以使用CSS的border-radius属性来画一个圆形,代码如下:
```
div {
width: 100px;
height: 100px;
border-radius: 50%;
background-color: white;
}
```
这将生成一个宽高均为100像素的白色圆形。
相关问题
圆形红白相间背景颜色css
圆形红白相间背景颜色的CSS可以通过使用渐变背景和border-radius属性来实现。以下是一种实现方式:
```css
.circle {
width: 200px;
height: 200px;
background: radial-gradient(circle, red 50%, white 50%);
border-radius: 50%;
}
```
解释一下上述代码:
- `.circle` 是一个类选择器,你可以将其应用于HTML元素上。
- `width` 和 `height` 属性设置了元素的宽度和高度,使其成为一个正圆。
- `background` 属性使用了 `radial-gradient` 函数来创建一个径向渐变背景。`circle` 参数表示渐变的形状为圆形,`red 50%` 表示从中心开始到50%的位置为红色,`white 50%` 表示从50%的位置到边缘为白色。
- `border-radius` 属性设置了元素的边框半径为50%,使其呈现圆形。
你可以将上述CSS代码应用于你的HTML元素上,即可实现圆形红白相间背景颜色效果。
css背景颜色填充动画
以下是一个简单的CSS背景颜色填充动画的例子:
```html
<!DOCTYPE html>
<html>
<head>
<title>CSS背景颜色填充动画</title>
<style>
.container {
width: 200px;
height: 200px;
position: relative;
background-color: #fff;
border: 1px solid #000;
overflow: hidden;
}
.box {
position: absolute;
top: 0;
left: 0;
width: 0;
height: 100%;
background-color: #f00;
transition: width 0.5s ease-in-out;
}
.container:hover .box {
width: 100%;
}
</style>
</head>
<body>
<div class="container">
<div class="box"></div>
</div>
</body>
</html>
```
解释一下上面的代码:
首先,我们创建了一个容器(`.container`),它的宽度和高度都是200px,背景颜色是白色,边框是黑色,`position`属性设置为`relative`,这是为了让内部的绝对定位元素(`.box`)相对于容器进行定位。
然后,我们创建了一个绝对定位的元素(`.box`),它的宽度初始值为0,高度为100%,背景颜色为红色,`transition`属性设置为`width 0.5s ease-in-out`,这是为了让它的宽度在0.5秒内从0变为100%时有一个平滑的过渡效果。
最后,我们使用`:hover`伪类来触发过渡效果,当鼠标悬停在容器上时,`.box`的宽度会从0变为100%,从而实现了背景颜色填充的动画效果。
相关推荐
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)