css 好看的复杂的边框样式
时间: 2023-09-14 08:02:33 浏览: 45
以下是几个好看的复杂的边框样式:
1. 边框渐变
```
border: 2px solid;
border-image: linear-gradient(to right, #f00, #0f0, #00f) 1;
```
2. 交错边框
```
border: 5px solid;
border-image: linear-gradient(to bottom, #f00, #f00 50%, #0f0 50%, #0f0) 1;
```
3. 斜线边框
```
border: 5px solid;
border-image: linear-gradient(45deg, transparent 80%, #f00 0, #f00) 1;
```
4. 点状边框
```
border: 5px dotted #f00;
```
5. 波浪边框
```
border: 5px solid;
border-image: repeating-linear-gradient(
to bottom,
transparent,
transparent 15px,
#f00 15px,
#f00 30px
) 1;
```
相关问题
css 好看的边框样式
以下是一些常见的好看的边框样式:
1. 实线边框:使用 border 属性设置边框样式为实线,如下所示:
```
border: 2px solid #ccc;
```
2. 虚线边框:使用 border 属性设置边框样式为虚线,如下所示:
```
border: 2px dashed #ccc;
```
3. 圆角边框:使用 border-radius 属性设置边框的圆角半径,如下所示:
```
border: 2px solid #ccc;
border-radius: 10px;
```
4. 渐变边框:使用 linear-gradient() 函数设置边框的渐变效果,如下所示:
```
border: 2px solid;
border-image: linear-gradient(to right, #f00, #0f0, #00f);
border-image-slice: 1;
```
5. 阴影边框:使用 box-shadow 属性设置边框的阴影效果,如下所示:
```
box-shadow: 0 0 10px #ccc;
```
6. 多重边框:使用 box-shadow 属性设置多个边框,如下所示:
```
box-shadow: 0 0 0 2px #f00, 0 0 0 4px #0f0, 0 0 0 6px #00f;
```
css好看的盒子边框样式
以下是一些常见的CSS盒子边框样式:
1. 实线边框:border-style: solid;
2. 虚线边框:border-style: dashed;
3. 点线边框:border-style: dotted;
4. 双线边框:border-style: double;
5. 没有边框:border-style: none;
6. 圆角边框:border-radius: 5px; (可以设置圆角的大小,单位为像素或百分比)
你可以根据需要选择其中的任何一种样式,并将其应用到你的盒子中。
相关推荐
![](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)