《前端入门到进阶》CSS基础,CSS属性:背景属性 本心 CSS, web前端 2021年1月9日 434 0 0 background 的常见背景属性 css2.1 中,常见的背景属性有以下几种:(经常用到,要记住) background-color:#ff99ff; 设置元素的背景颜色。 background-image:url(images…
《前端入门到进阶》CSS基础,CSS属性:背景属性 本心 CSS, web前端 2021年1月9日 434 0 0 background 的常见背景属性 css2.1 中,常见的背景属性有以下几种:(经常用到,要记住) background-color:#ff99ff; 设置元素的背景颜色。 background-image:url(images…
《前端入门到进阶》CSS基础,CSS属性:字体属性和文本属性 本心 CSS, web前端 2021年1月8日 377 0 1 本文重要内容 CSS的单位 字体属性 文本属性 定位属性:position、float、overflow等 CSS的单位 html中的单位只有一种,那就是像素px,所以单位是可以省略的,但是在CSS中不一样。 CSS中的单位是必须要…
《前端入门到进阶》CSS基础,CSS属性:字体属性和文本属性 本心 CSS, web前端 2021年1月8日 377 0 1 本文重要内容 CSS的单位 字体属性 文本属性 定位属性:position、float、overflow等 CSS的单位 html中的单位只有一种,那就是像素px,所以单位是可以省略的,但是在CSS中不一样。 CSS中的单位是必须要…
CSS3基础知识:box-shadow, outline 实现边框内圆角 Javan CSS, css-3 2020年11月30日 325 0 3 知识点分析 我们都知道box-shadow是会紧贴border-radius圆角边的,但是,描边outline并不会与圆角边border-radius贴合,我们可以将两者组合,通过box-shadow去填补描边outline所产生的…
CSS3基础知识:box-shadow, outline 实现边框内圆角 Javan CSS, css-3 2020年11月30日 325 0 3 知识点分析 我们都知道box-shadow是会紧贴border-radius圆角边的,但是,描边outline并不会与圆角边border-radius贴合,我们可以将两者组合,通过box-shadow去填补描边outline所产生的…
CSS3基础知识:box-shadow, outline,outline-offset 实现多重边框 Javan CSS, css-3 2020年11月30日 276 0 1 基础知识定义 box-shadow相信很多人都已经用透了,可用来给元素添加各种阴影效果,反过来,也只有我们需要实现阴影时才会想起它,其实,box-shadow还接受第四个参数作为阴影扩张半径,当我们只设置扩张半径时,零偏移,零模糊,…
CSS3基础知识:box-shadow, outline,outline-offset 实现多重边框 Javan CSS, css-3 2020年11月30日 276 0 1 基础知识定义 box-shadow相信很多人都已经用透了,可用来给元素添加各种阴影效果,反过来,也只有我们需要实现阴影时才会想起它,其实,box-shadow还接受第四个参数作为阴影扩张半径,当我们只设置扩张半径时,零偏移,零模糊,…
CSS3基础知识:background-clip 实现半透明边框 Javan CSS, css-3 2020年11月30日 274 0 1 基础知识定义 background-clip 设置元素的背景(背景图片或颜色)是否延伸到边框、内边距盒子、内容盒子下面。 语法 background-clip: border-box; // 背景延伸至边框外沿(但是在边框下层) b…
CSS3基础知识:background-clip 实现半透明边框 Javan CSS, css-3 2020年11月30日 274 0 1 基础知识定义 background-clip 设置元素的背景(背景图片或颜色)是否延伸到边框、内边距盒子、内容盒子下面。 语法 background-clip: border-box; // 背景延伸至边框外沿(但是在边框下层) b…
炫酷的CSS 作图web组件 – css-doodle Javan CSS, css-3, web前端 2020年6月17日 1.83K 0 53 今天不写代码,就看看人家是如何写代码的。 什么是css-doodle 官方地址: https://css-doodle.com/ <css-doodle />是一个Web组件。其基于Shadow DOM V1和Custo…
炫酷的CSS 作图web组件 – css-doodle Javan CSS, css-3, web前端 2020年6月17日 1.83K 0 53 今天不写代码,就看看人家是如何写代码的。 什么是css-doodle 官方地址: https://css-doodle.com/ <css-doodle />是一个Web组件。其基于Shadow DOM V1和Custo…
CSS 3D世界,360°旋转水晶魔方 Javan CSS, css-3 2020年6月9日 2.40K 0 84 你家有类似的水晶魔方吗?我第一次见到它的时候,就觉得这个东西真不错,所以我家现在有2个。不过一个已经坏掉了,坐车放在箱子里面,颠簸导致水晶的四个角都破损了,大家如果要携带一定要小心哦。 现在我们来制作一个永远不会破损的水晶魔方,用代…
CSS 3D世界,360°旋转水晶魔方 Javan CSS, css-3 2020年6月9日 2.40K 0 84 你家有类似的水晶魔方吗?我第一次见到它的时候,就觉得这个东西真不错,所以我家现在有2个。不过一个已经坏掉了,坐车放在箱子里面,颠簸导致水晶的四个角都破损了,大家如果要携带一定要小心哦。 现在我们来制作一个永远不会破损的水晶魔方,用代…
CSS3D世界,纯CSS如何绘制三棱锥 Javan CSS, css-3 2020年6月8日 2.12K 0 70 非常抱歉,断更了半年,原因也是有很多,疫情期间在老家也是没有电脑,上班后非常的忙,种种原因吧。 让小伙伴们久等了,非常抱歉!后续还是保持正常更新,不辜负小伙伴们的信任。 下面还是回归今天的主题:CSS如何制作三棱锥? 结构 三棱锥,…
CSS3D世界,纯CSS如何绘制三棱锥 Javan CSS, css-3 2020年6月8日 2.12K 0 70 非常抱歉,断更了半年,原因也是有很多,疫情期间在老家也是没有电脑,上班后非常的忙,种种原因吧。 让小伙伴们久等了,非常抱歉!后续还是保持正常更新,不辜负小伙伴们的信任。 下面还是回归今天的主题:CSS如何制作三棱锥? 结构 三棱锥,…
CSS基础知识学习:CSS绘制铅笔 Javan CSS, css-3 2020年1月28日 6.73K 0 296 铅笔,距今已有四百多年的历史,其中,绘画素描的铅笔分为诸多类型,它分成三个发展阶段,分为石墨、木制笔杆、带帽铅笔。 1564年,在英格兰一个叫巴罗代尔的地方,人们发现了一种黑色矿物——石墨。很快,当地的一些牧羊人发现,可以用石墨在羊…
CSS基础知识学习:CSS绘制铅笔 Javan CSS, css-3 2020年1月28日 6.73K 0 296 铅笔,距今已有四百多年的历史,其中,绘画素描的铅笔分为诸多类型,它分成三个发展阶段,分为石墨、木制笔杆、带帽铅笔。 1564年,在英格兰一个叫巴罗代尔的地方,人们发现了一种黑色矿物——石墨。很快,当地的一些牧羊人发现,可以用石墨在羊…
CSS爱心:把你的心我的心串一串 Javan CSS, css-3 2020年1月20日 7.05K 2 298 前面几个小节都要提到Box-Shadow,这个小节让我们来真正感受它的强大吧。话不多说,直接看图: 这个扑通扑通跳动的心,就是Box-Shadow制作的。如果你看过前面小节《CSS3 Box-Shadow Loading,创造无限可…
CSS爱心:把你的心我的心串一串 Javan CSS, css-3 2020年1月20日 7.05K 2 298 前面几个小节都要提到Box-Shadow,这个小节让我们来真正感受它的强大吧。话不多说,直接看图: 这个扑通扑通跳动的心,就是Box-Shadow制作的。如果你看过前面小节《CSS3 Box-Shadow Loading,创造无限可…