帮我用html和css写一个盒子,它的边框为60px solid #000,自身大小为100*100
时间: 2024-02-13 20:06:33 浏览: 26
好的,以下是一个简单的 HTML 和 CSS 代码,可以实现你的需求:
```html
<div class="box"></div>
```
```css
.box {
border: 60px solid #000;
width: 100px;
height: 100px;
}
```
这段代码中,我们创建了一个 div 元素,并赋予它一个名为 box 的 class。在 CSS 中,我们为这个 class 设置了边框宽度为60px,颜色为黑色(#000),同时设置了宽度和高度都为100px,这样就实现了一个边框为60px的黑色正方形盒子。
相关问题
css html布局 在一个带边框的div盒子外再加一个空心边框为1px的盒子
可以通过以下代码实现:
HTML代码:
```html
<div class="outer-box">
<div class="inner-box">
<!-- 内容 -->
</div>
</div>
```
CSS代码:
```css
.outer-box {
border: 1px solid #ccc; /* 实心边框 */
padding: 10px;
}
.inner-box {
border: 1px dashed #ccc; /* 空心边框 */
padding: 10px;
}
```
这里我们使用了两个 `div` 标签,外层的 `div` 是带实心边框的盒子,内层的 `div` 则是带空心边框的盒子。通过设置内层盒子的 `padding` 属性来控制内容与空心边框之间的间距。
写一个边框10px的网页表格html和css
以下是一个边框10px的网页表格的HTML和CSS代码:
HTML代码:
```html
<table class="table-bordered">
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
<tr>
<td>张三</td>
<td>25</td>
<td>男</td>
</tr>
<tr>
<td>李四</td>
<td>30</td>
<td>女</td>
</tr>
</table>
```
CSS代码:
```css
.table-bordered {
border: 10px solid #000;
border-collapse: collapse;
}
.table-bordered th,
.table-bordered td {
border: 1px solid #000;
padding: 5px;
}
```
这段代码定义了一个名为 `table-bordered` 的表格样式,其中 `border` 属性设置表格的边框宽度为 10px,`border-collapse` 属性设置表格边框的合并方式为折叠。`th` 和 `td` 元素的边框宽度为 1px,内边距为 5px。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.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)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)