TNBLOG
首页
博客
视频
资源
问答
猿趣
手机
关于
搜索
收藏
便签
笔记
消息
创作
登录
剑轩
故如虹,知恩;故如月,知明
博主信息
排名
6
文章
6
粉丝
16
评论
8
文章类别
CSS
15篇
微服务
41篇
Git
14篇
.NET
102篇
移动开发
33篇
软件架构
23篇
.NET Core
119篇
.NET MVC
11篇
英语
3篇
随笔
86篇
Bootstrap
3篇
Redis
21篇
编辑器
10篇
Js相关
15篇
虚拟化
8篇
更多
Oracle
7篇
Python
14篇
数据库
26篇
EF
17篇
微信
3篇
前端
151篇
消息队列
6篇
docker
41篇
多线程
1篇
Java
4篇
软件基础
2篇
C++
2篇
WCF
7篇
Linux
7篇
nginx
5篇
K8S
9篇
ABP
2篇
最新文章
最新评价
{{item.articleTitle}}
{{item.blogName}}
:
{{item.content}}
关于我们
ICP备案 :
渝ICP备18016597号-1
网站信息:
2018-2024
TNBLOG.NET
技术交流:
群号656732739
联系我们:
contact@tnblog.net
欢迎加群
欢迎加群交流技术
原
css3 渐变 两边浅中间深。由中间向两边。 div边框渐变色
1827
人阅读
2020/1/27 17:57
总访问:
3992350
评论:
0
收藏:
0
手机
分类:
前端
**设计图是这样的** <img src="https://img.tnblog.net/arcimg/aojiancc2/ac1b83534a414544bf20b3a5e710a071.png" width="366px"> ### 可以使用线性渐变语法:background: linear-gradient(direction, color-stop1, color-stop2, ...) 例如从左到右的渐变,蓝色--红色--蓝色 ``` background:linear-gradient(to left,blue,red,blue); ``` 比如我们这里的效果应该是,白色--蓝色--白色 ``` background:linear-gradient(to left,#fff,#3FDDFA,#fff); ``` 但是这个设计图底部其实是有背景或者是背景图片的小格子的,所以渐变不能从白色开始,应该做成透明色的 ``` background:linear-gradient(to left,rgba(63, 221, 250, 0),#3FDDFA,rgba(63, 221, 250, 0)); ``` **其实还可以使用百分比来调整以下渐变开始或者结束的位置** 示例: ``` /* 从下到上,从蓝色开始渐变、到高度40%位置是绿色渐变开始、最后以红色结束 */ linear-gradient(0deg, blue, green 40%, red); ``` 感觉默认应该是开始是0%,中间是50%,结束是100%。当然具体还是看文档 ``` background:linear-gradient(to left,rgba(63, 221, 250, 0) 0%,#3FDDFA 50%,rgba(63, 221, 250, 0) 100%); ``` ### div 边框 两边浅中间深 渐变色 设计图如下: ![](https://img.tnblog.net/arcimg/aojiancc2/efed0a77254744059e9d53a4724d5e7c.png) 样式: ``` .learnActivity_warp { width: 219px; text-align: center; //background-color: #abcdff; height: 130px; padding-top: 20px; border-left: 1px solid; border-right: 1px solid; border-image: linear-gradient(to bottom, rgba(63, 221, 250, 0), #4288B6, rgba(63, 221, 250, 0)) 1; // box-shadow:-1px 0px rgba(63, 221, 250, .4) inset; //box-shadow: 3px 0px rgba(255, 255, 255, 0.1) inset, -3px 0px rgba(255, 255, 255, 0.2) inset; } ``` 两边的内发光效果可以利用box-shadow来实现,如果直接通过一个div来设置两边的内发光效果不好实现,可以通过绝对定位在边框两边放两个div,来单独设置阴影实现内发光的效果。
欢迎加群讨论技术,1群:677373950(满了,可以加,但通过不了),2群:656732739
👈{{preArticle.title}}
👉{{nextArticle.title}}
评价
{{titleitem}}
{{titleitem}}
{{item.content}}
{{titleitem}}
{{titleitem}}
{{item.content}}