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

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

作者头像
紫旭Blog - blog.zixutech.cn
发布于 2020-08-24 03:49:54
发布于 2020-08-24 03:49:54
36200
代码可运行
举报
文章被收录于专栏:紫旭紫旭
运行总次数: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 删除。

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

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
纯 CSS 实现十个还不错的 Loading 效果
repeating-linear-gradient(135deg,#ddd 0 10px,#eee 0 20px) 0/100%; 画出灰色的斑马线条纹,repeating-linear-gradient(135deg,#f03355 0 10px,#ffa516 0 20px) 0/0% no-repeat 则是进度条加载的条纹。
Jimmy_is_jimmy
2022/04/01
4990
纯 CSS 实现十个还不错的 Loading 效果
CSS实现渐变色边框(Gradient borders)的5种方法
给 border 设置渐变色是很常见的效果,实现这个效果有很多思路,今天把我所知道的方法罗列于此供大家参考。
MudOnTire
2022/03/22
15.7K0
CSS实现渐变色边框(Gradient borders)的5种方法
10个超酷的H5特效设计+1个仿最新苹果UI设计(压轴)
1.抽屉式(动态)选择 button(纯css实现) html代码:  <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="s
淼学派对
2022/11/20
1.6K0
10个超酷的H5特效设计+1个仿最新苹果UI设计(压轴)
CSS实现渐变字
渐变主要有三种类型:线性渐变( linear-gradient)、径向渐变( radial-gradient)、圆锥渐变( conic-gradient)
赤蓝紫
2023/01/05
1.5K0
CSS实现渐变字
css创意罗盘表盘
(注意要用“jquery.min.js”) 效果如上 <!doctype html> <html> <head> <meta charset="utf-8"> <title>
天天Lotay
2022/12/02
5120
css创意罗盘表盘
Typecho美化主题教程
但是现在我们会发现,整个网站的标签都变成了这样,那我们如何只让他在文章中出现呢? 在第一个代码块ol前面加上#post即可使用了。
回忆大大
2021/08/09
1.6K0
7b2美化-首页添加导航会员区块
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
小狐狸说事
2022/11/17
8490
仿chatGPT或chatPDF的前端界面布局,css实现对话聊天布局代码,响应式左右分栏布局(附完整源代码)
chatPDF或者chatGPT的界面挺简洁的,就是一个左侧的列表以及右侧的对话列表,现在使用css实现这样的布局
唯一Chat
2023/04/26
3.8K0
仿chatGPT或chatPDF的前端界面布局,css实现对话聊天布局代码,响应式左右分栏布局(附完整源代码)
CSS卡通小汽车
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CodePen - CSS ART - Vintage VW Bug -</title> <style> :root { --size: 60; --unit: calc((var(--size) / 800) * 1vmin); } * { box-sizing: border-box; } bo
我不是费圆
2020/12/17
4850
wordpress优化经历(四)——一把伞的时间轴归档页模板
一把伞的时间轴归档页模板文件 链接一:https://download.csdn.net/download/qq_42038623/21072565
不愿意做鱼的小鲸鱼
2022/09/26
2880
wordpress优化经历(四)——一把伞的时间轴归档页模板
CSS 奇思妙想边框动画
今天逛博客网站 -- shoptalkshow[1],看到这样一个界面,非常有意思:
微芒不朽
2022/09/13
9860
转一个css3绘制的iPhone6
css3绘制的iPhone6 <!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> @font-f
练小习
2017/12/29
5420
49个常用的CSS代码片段,建议整理收藏
text-shadow 为网页字体添加阴影,通过对text-shadow属性设置相关的属性值。
前端达人
2021/07/16
2.3K0
用纯CSS实现优惠券剪卡风格
在做商城类项目的时候,我们可能都会经历过“优惠券”这类需求,笔者在过往工作中,都是直接要求UI切图来实现,直到有一天产品告诉我一个奇思妙想:这个优惠券的宽度会随内容变化的!一下子让我陷入了人生的大思考,这样图片方式可不好整呐,因此萌生一个想法:能不能用纯css实现这些效果呢?
茶无味的一天
2022/10/05
7550
用纯CSS实现优惠券剪卡风格
驶入2023
马上进入2023年了,这一年我们经历了很多有酸甜苦辣,但是并不妨碍我们用崭新的自己来面对新的一年,偶然在网上看到一位大佬用css做了一辆喜庆的车车来让人们驶入2023
橘子君丶
2023/03/06
2710
订单确认按钮动画
阿超
2024/03/12
1910
用css3实现惊艳面试官的背景即背景动画(高级附源码)
这篇文章参考《css揭秘》这本书,并作出了自己的总结,希望能让大家更有收获,也强烈推荐大家看看这本书,你值得拥有。我们将学到
徐小夕
2019/09/24
9190
用css3实现惊艳面试官的背景即背景动画(高级附源码)
CSS 奇思妙想边框动画
谈到边框,首先会想到 border,我们最常用的莫过于 solid,dashed,上图中便出现了 dashed。
Sb_Coco
2021/01/20
1.3K0
电商放大镜及动态边框效果
  但是以上两个思路均有问题。如果设置border,如何使其边框动画?如果周边设置4个div,那么不仅是需要js操控,并且无形之中增加了许多复杂度,与编程思想背道而驰。 那么我们还有别的办法来处理使边框动起来吗?首先,动画是一定要有的。其次,如果不能用border,那么用background怎么样呢? justdoit.
流眸
2019/08/12
2K0
电商放大镜及动态边框效果
CSS3实现多种背景效果
重复平铺的几何图案很美观,但看起来可能有一些呆板。其实自然界中的事物都不是以无限平铺的方式存在的。即使重复,也往往伴随着多样性和随机性。因此为了更自然一些,我们可能需要实现的背景随机一些,这样就显得自然一点。
laixiangran
2018/07/25
9090
CSS3实现多种背景效果
相关推荐
纯 CSS 实现十个还不错的 Loading 效果
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验