css边框好看的特效有哪些 并列举代码
时间: 2024-03-09 20:50:49 浏览: 37
以下是几个CSS边框好看的特效以及相应的代码示例:
1. 渐变边框特效
```css
.gradient-border {
border: 3px solid transparent;
background-image: linear-gradient(to bottom, #4a90e2, #2a4cb8);
background-origin: border-box;
background-clip: content-box, border-box;
}
```
2. 动态边框特效
```css
.dynamic-border {
position: relative;
border: 3px solid #4a90e2;
}
.dynamic-border::before {
content: "";
position: absolute;
top: -3px;
left: -3px;
right: -3px;
bottom: -3px;
border: 3px solid #2a4cb8;
z-index: -1;
transition: all 0.3s ease-in-out;
}
.dynamic-border:hover::before {
top: -6px;
left: -6px;
right: -6px;
bottom: -6px;
}
```
3. 斜角边框特效
```css
.sloped-border {
position: relative;
border: 3px solid #4a90e2;
}
.sloped-border::before {
content: "";
position: absolute;
top: -3px;
left: -3px;
right: -3px;
bottom: -3px;
border: 3px solid transparent;
z-index: -1;
transform: skew(-10deg);
}
```
4. 虚线边框特效
```css
.dashed-border {
border: 2px dashed #4a90e2;
}
```
5. 圆角边框特效
```css
.rounded-border {
border: 3px solid #4a90e2;
border-radius: 10px;
}
```
这些特效只是其中的一部分,您可以根据自己的需求和创意来设计出更多有趣的边框特效。
相关推荐
![](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)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)