Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >[代码片段]谷歌的一个不错的CSS样式,不得不说大厂的前端设计师美感就是好。

[代码片段]谷歌的一个不错的CSS样式,不得不说大厂的前端设计师美感就是好。

作者头像
紫旭Blog - blog.zixutech.cn
发布于 2020-08-24 03:49:54
发布于 2020-08-24 03:49:54
36100
代码可运行
举报
文章被收录于专栏:紫旭紫旭
运行总次数:0
代码可运行

代码

直接上效果图

我本来以为这个彩色的边框是个背景图片,看了一下源码竟然是个background样式,看来我学识还是太浅。

拿走了拿走了#滑稽

使用方法

实现这个效果需要2个div嵌套,外层的我取class为outer-div,内层的我取class为inner-div

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
.outer-div{
background: linear-gradient(90deg,#34a853 4%,#4285f4 0%) top/100% 34% no-repeat,linear-gradient(90deg,#fbbc04 50%,#4285f4 0%) top/100% 82% no-repeat,linear-gradient(90deg,#fbbc04 10%,#ea4335 0%) top/100% 100%; 
width: 200px; 
/* set width yourself */
height: 350px;
/* set height yourself */
padding: 4px;
/* default padding is 4px, you can set any value that makes you feel good */
border-radius: 8px;
/* outer-div's border-radius must be twice larger than the inner-div */
}


.inner-div {
width: 100%;
height: 100%;
border-radius: 4px;
/* inner-div's border-radius must be twice lower than the outer-div */
}

测试效果

随便写个DIV测试个效果

我是测试效果的呢

哈哈哈,真的好看诶

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2020-08-21,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
VR行业高层挖角不断,商业化之路愈加扑朔迷离
虽然才过了情人节,但是各大公司高管已经迫不及待地开始一波又一波的分手,寻求下一程的合适伴侣。 这两个月期间频繁的高层变动包括Oculus、HTC、谷歌、Jaunt等等公司,涉及到VR硬件、内容开发以及主题公园等等细分领域,那么这些关注不同细分领域公司之间高层的流动又预示着什么? 这边跳完那边挖 首先我们做了一张各大公司跳槽挖角的表格: 年前最大的一起人事变动新闻,可能就是小米高级副总裁雨果巴拉离职加入Oculus。雨果巴拉在2013年的时候加入小米,负责小米的国际业务扩展,以及和谷歌安卓的战略合作。离开小米
镁客网
2018/05/29
4070
跳槽有感
跳槽是指换工作单位,甚至是更换工作职业,当前职场中常见、重要的事情,那么跳槽需要关注哪些内容呢。
2020/12/20
4180
offer选择:创业公司 VS 大厂外包
你好,我是小牛。 经常后台收到私信有同学问:面试拿到两个offer,一个是规模只有几十人的初创小公司,另一个是大厂外包岗位。都是功能测试,两者薪水待遇也差不多,该如何选择?更有利于之后的职业发展...
测试小牛
2022/04/26
1.5K2
工作三年,跳到上海18k
今天给大家分享的主题是:一位球友,21年毕业在西安的一家公司做银行相关的研发,到现在也差不多有3年的时间,因为技术栈和薪资的原因,就想换一份工作。
沉默王二
2023/09/12
2780
工作三年,跳到上海18k
技术大牛出走?原华为自动驾驶CTO陈亦伦博士加盟清华AIR张亚勤团队
---- 新智元报道   编辑:拉燕 好困 【新智元导读】刚刚,华为自动驾驶部门又一位大佬出走。 最近,又有一位华为的高管离职了。 华为自动驾驶部门又损失一员大将,这次是原CTO(首席技术官)——陈亦伦博士。 华为自动驾驶「顶梁柱」 说起陈亦伦博士,学术圈的人可能都多多少少有些了解。 在Google Scholar上,陈博士发表论文30余篇,同行引用次数达到2953次(2017年后引用次数为1315次)。h指数为20(2017年后为14),i10指数为28(2017年后为16)。 陈亦伦博士出生
新智元
2022/07/18
8120
技术大牛出走?原华为自动驾驶CTO陈亦伦博士加盟清华AIR张亚勤团队
中国汽车工业离世界有多远?
本文谈及的是中国汽车工业的问题,进而扩大至整个基础工业。其实不管对于汽车工业,还是机器人产业,中国工业普遍存在这样的问题,在此将本文与诸君共享,以期为中国机器人工业的发展提供参考。 且先放下标题,我们来说说“六西格玛的”故事。 六西格玛是一套涉及到设计、生产与管理的方法。它使用统计学基本原理发展出一套方法和流程,以达到“零缺陷”的目标。通用电气在八九十年代创立这套东西之后,摩托罗拉、通用汽车等公司纷纷推行。但显然这些公司没能成功制造出“零缺陷”的产品,个别甚至挣扎在破产的边缘。 巧合的是,日本人在类似时间搞
机器人网
2018/04/12
6580
3个月内离职和2年左右离职的差别
马云曾经说,员工离职主要原因只有两个:钱给的不够;心受委屈了。概括了主要原因但不全面,同时过于笼统,心受了什么委屈,具体来讲还要分很多方面。员工为什么离职?他们对什么不满?我们今天就来讨论一下。 不要
用户1756920
2018/07/23
4070
3个月内离职和2年左右离职的差别
什么样的离职原因是可以被接受的?
关于离职原因,我列出五点原则,相信只需几分钟,看完这篇回答,你以后在这个问题上就所向披靡了。
红目香薰
2022/11/29
9650
贾扬清回应:确认离职,开启新的职业生涯
机器之心报道 机器之心编辑部 贾扬清从阿里巴巴正式毕业,计划走向职业生涯的下一个挑战。 近段时间,ChatGPT 与大模型的爆火,又吸引了整个科技领域以及投资圈对 AI 的关注。最近也爆出了许多学术界、业界 AI 大佬投身创业潮的消息。 昨日,知名人工智能科学家贾扬清从阿里巴巴离职创业的信息也被爆出,贾扬清本人旋即正式回应,确定了从阿里巴巴离职的消息。 以下是贾扬清的个人声明: 加入阿里巴巴的时候,最吸引我的是云计算可以带给社会的独特贡献:AI,Big data,Compute,Developer,
机器之心
2023/03/29
2550
贾扬清回应:确认离职,开启新的职业生涯
前腾讯开发组长,跳槽到头条后猝死
今日一位网友在网上吐槽,因为996的上班时间,今日头条一名程序员猝死了。网爆前腾讯OMG开发组长,跳槽入职头条后,昨天猝死了。
JAVA高级架构开发
2018/10/06
4.1K0
一组让京东所有研发人泪崩的照片
这两天,所有京东人儿的朋友圈都被周六晚上的京东家宴刷屏了,来自全国入职满5年、10年的大佬和超级大佬们齐聚总部A座大厅,端起“果冻杯”与东哥一同把酒言欢,回忆起公司一路走来难以忘却的激情与热血。 见证
京东技术
2018/06/20
3.6K0
程序员跳槽时,如何高效地准备面试?
今天和大家分享的主题是「程序员跳槽时,如何高效地准备面试?」,但其实今天主要涉及到的是 HR 在面试时有哪些套路,这样可以见招拆招,斩获 offer!
技术zhai
2019/02/15
1K0
360 人工智能院长邓亚峰离职创业,入局生命科学,曾任百度资深科学家、格灵深瞳 CTO
AI掘金志消息,原360集团副总裁、人工智能研究院院长兼搜索事业部总经理邓亚峰,于上周六出席了2022年自然语言处理峰会并发表演讲。
AI掘金志
2022/11/08
1.2K0
360 人工智能院长邓亚峰离职创业,入局生命科学,曾任百度资深科学家、格灵深瞳 CTO
中国无人车第一案!百度状告景驰王劲:窃取机密,不还电脑,索赔5000万
李根 发自 凹非寺 量子位 出品 | 公众号 QbitAI 还有9天,2017年就要成为过去,但恩怨情仇不会结束。 百度动手了。 在自动驾驶方面投入巨大的百度,去年底、今年初遭遇一大波核心技术人员离职,也成就了一批所谓百度系无人车创业群。 你以为百度会接受这个结果? 最新的消息是:百度以侵犯商业秘密为由,将其前自动驾驶事业部总经理王劲及王劲所经营的景驰公司诉至北京知识产权法院。 拿下中国无人车第一个罚单后,百度又让中国无人车第一案成真。 该案中,百度请求法院判令,两被告
量子位
2018/03/22
7090
中国无人车第一案!百度状告景驰王劲:窃取机密,不还电脑,索赔5000万
丰田接手谷歌旗下波士顿动力6大原因
【新智元导读】28日外媒消息 Google 旗下波士顿动力机器人公司将被丰田收购,交易基本完成。新智元过去已有很多文章讨论了 Google 和波士顿动力之间的矛盾,其中也包括这家昂贵的机器人公司很难在近期带来商业利益。财大气粗的 Google 都失去耐心,为何丰田还要接手过来?实际上,无论从人员、技术还是产品落地,这次收购都能为丰田带来可观的回报,关键是波士顿动力与丰田在硬件上的契合。本文分析丰田接手波士顿动力的6大原因。 2016 年 5 月 28 日,根据 Tech Insider 的报道,Google
新智元
2018/03/28
7100
丰田接手谷歌旗下波士顿动力6大原因
程序员跳槽指南——怎么跳槽薪资翻倍?1、你为什么跳槽?2、如何选择目标公司?3、如何准备跳槽?4、跳槽过程中应该避免哪些坑?海投简历5、如何准备面试?6、谈薪资这件事要有技巧7、选择正确的方式跟现东家
1、你为什么跳槽? 首先是因为自己的职业生涯遇到瓶颈了。那么什么情况表明你遇到瓶颈了呢?我觉得有几点,你可以先简单评估一下。 你已经有六个月清楚知道自己没有成长。 你的上级已经有好几年没晋升过了,这意味着你这个部门、这个企业、这个行业已经没有发展前景了。 你的数据很久没有增长了,作为一个职业人,你就要找一份能直接或者间接作用于某个数据成长的工作。 你的老板对你无动于衷、不培育、不提拔、不批评、不涨薪、不开除。 当然还有一些其他原因可能促使你跳槽: 公司经营不下去了。你所在的公司可能因为产品方向没有选好,或者
美的让人心动
2018/06/14
9750
程序员与年龄:四十岁普通开发、三十五岁首席架构、三十岁基层Leader
最近,有一个词儿特别热门——躺平。有没有人跟你说过:”躺平说起来容易,做起来更容易。“
三分恶
2021/06/10
7410
是权谋还是不当竞争,自动驾驶领域为何频发“技术偷窃”事件?
无论是古往今来的权谋故事、军事战争、还是商业大片之中,派遣己方人员去“敌方”卧底窃取机密总是最令看客们心惊胆战却倍感刺激的情节。近年来,这一经典的情节在自动驾驶领域频繁上演,其中夹杂着出走、背叛、信念不合种种,背后究竟是人性的“扭曲”,还是道德的“沦丧”?
镁客网
2019/05/07
4580
是权谋还是不当竞争,自动驾驶领域为何频发“技术偷窃”事件?
苹果汽车遭「斩首」?高级副总裁跳槽福特,1年离职4位高管
福特汽车在声明中表示,道格-菲尔德(Doug Field)将担任首席先进技术和嵌入式系统官。
新智元
2021/09/17
2730
从P4到P9, 在马云家写代码到双11前端PM
今年的双11已经是阿里资深前端技术专家舒文来阿里的第11年,从应届生到双11前端PM,他一路升级打怪,实现了岗位上从P4到P9的晋升。这第11届双11顺利结束之际,他把在阿里这些年的成长经历做一个总结和分享,希望你能在他的故事中得到些许启发。
ConardLi
2019/11/21
4.2K0
从P4到P9, 在马云家写代码到双11前端PM
推荐阅读
VR行业高层挖角不断,商业化之路愈加扑朔迷离
4070
跳槽有感
4180
offer选择:创业公司 VS 大厂外包
1.5K2
工作三年,跳到上海18k
2780
技术大牛出走?原华为自动驾驶CTO陈亦伦博士加盟清华AIR张亚勤团队
8120
中国汽车工业离世界有多远?
6580
3个月内离职和2年左右离职的差别
4070
什么样的离职原因是可以被接受的?
9650
贾扬清回应:确认离职,开启新的职业生涯
2550
前腾讯开发组长,跳槽到头条后猝死
4.1K0
一组让京东所有研发人泪崩的照片
3.6K0
程序员跳槽时,如何高效地准备面试?
1K0
360 人工智能院长邓亚峰离职创业,入局生命科学,曾任百度资深科学家、格灵深瞳 CTO
1.2K0
中国无人车第一案!百度状告景驰王劲:窃取机密,不还电脑,索赔5000万
7090
丰田接手谷歌旗下波士顿动力6大原因
7100
程序员跳槽指南——怎么跳槽薪资翻倍?1、你为什么跳槽?2、如何选择目标公司?3、如何准备跳槽?4、跳槽过程中应该避免哪些坑?海投简历5、如何准备面试?6、谈薪资这件事要有技巧7、选择正确的方式跟现东家
9750
程序员与年龄:四十岁普通开发、三十五岁首席架构、三十岁基层Leader
7410
是权谋还是不当竞争,自动驾驶领域为何频发“技术偷窃”事件?
4580
苹果汽车遭「斩首」?高级副总裁跳槽福特,1年离职4位高管
2730
从P4到P9, 在马云家写代码到双11前端PM
4.2K0
相关推荐
VR行业高层挖角不断,商业化之路愈加扑朔迷离
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验