|
|
请马上登录,朋友们都在花潮里等着你哦:)
您需要 登录 才可以下载或查看,没有账号?立即注册
x
之前我们至少有过两个帖子介绍过盒子的渐变边框,它们都是用 clip-path 实现,很酷很酷,感兴趣的朋友可以搜一搜。
这里再讨论另一种实现方法。不多说,先上酸菜,哦不对,先上代码:
- <style>
- .mydiv {
- margin: 20px auto;
- width: 400px;
- height: 120px;
- border: 4px solid tan;
- border-image: linear-gradient(60deg,red,navy,orange,magenta) 4;
- background: gray;
- }
- </style>
- <div class="mydiv"></div>
复制代码 核心代码在第6、7行:
第6行:设定border边框样式,边框厚度4px,实心,颜色是tan。边框颜色这里无关紧要,它将被后面的设置覆盖。
第7行:利用 border-image 属性设置边框图片,这个属性语法很复杂,但是我们不用图片而用渐变,语法就很简单。我们使用线性渐变,渐变语句之后面随便跟一个数字,如果不放心,数字之后再加一个 repeat,效果就出来了。
|
评分
-
| 参与人数 3 | 威望 +130 |
金钱 +260 |
经验 +130 |
收起
理由
|
红影
| + 50 |
+ 100 |
+ 50 |
赞一个! |
雨中悄然
| + 30 |
+ 60 |
+ 30 |
赞一个! |
樵歌
| + 50 |
+ 100 |
+ 50 |
赞一个! |
查看全部评分
|