css
关注
分享
扫一扫
文章平均质量分 94
Fatman_
码而不思则罔，思而不码则殆。
展开
-
有趣的css—简单的下雨效果2.0版
简单的下雨效果2.0版前言昨天发了有趣的css—简单的下雨效果，有位老哥给我提了一个很棒的建议，大致意思是雨滴应该和波纹的位置一致。这是按照老哥的建议完善后的效果图：思路制作背景首先给body中添加一个id为rain的div，并通过背景颜色线性渐变得到天空-地平线-海面的效果。<!DOCTYPE html><html> <head> <meta name="charset" content="utf-8"/>原创 2021-05-17 23:15:36 · 4120 阅读 · 1 评论 -
有趣的css—简单的下雨效果
简单的下雨效果前言最近在b站上看到一个下雨效果的视频原创 2021-05-16 16:46:18 · 3113 阅读 · 0 评论 -
css详解background八大属性及其含义
background（背景）以前笔者在css盒模型以及如何计算盒子的宽度一文中提到过盒模型可以看成由 元素外边距（margin）、元素边框（border）、元素内边距（padding）和元素内容（content） 4部分组成，不过这只是从2D的视角来看盒模型的组成，而今天笔者将阐述如何从3D的视角看待盒模型的组成。从2D视角看盒模型示意图：从3D视角看盒模型示意图：background-color（背景颜色）背景颜色是背景中最常用的属性，它支持的值类型有：颜色名称，比如 red, white原创 2021-04-18 16:38:24 · 3042 阅读 · 7 评论 -
css详解position五种属性用法及其含义
position（定位）position — 作为css属性三巨头（position、display、float）之一，它的作用是用来决定元素在文档中的定位方式。其属性值有五种，分别是 — static（正常定位）、relative（相对定位）、absolute（绝对定位）、fixed（固定定位）、sticky（粘性定位）。static（正常定位）static(正常定位) 是元素position属性的默认值，包含此属性的元素遵循常规流1。正常定位呈现常规流的示例html代码：<!DOCTYP原创 2021-04-12 11:15:21 · 31749 阅读 · 9 评论 -
css盒模型以及如何计算盒子的宽度
盒模型与box-sizing盒模型与box-sizing盒模型元素外边距元素边框元素内边距元素内容box-sizingcontent-boxborder-box参考盒模型与box-sizing盒模型每个存在于可访问性树中的元素都会被浏览器绘制成一个盒子(因为元素设置display:none后不存在于可访问性树中，所以不被浏览器渲染)。每个盒子都是由4部分组成的，它们分别是元素外边距、元素边框、元素内边距和元素内容。元素外边距元素边框元素内边距元素内容box-sizingcontent-bo原创 2021-04-08 22:53:20 · 3406 阅读 · 0 评论 -
今天聊点干货—关于CSS样式来源
CSS样式来源样式来源浏览器默认样式em元素和strong元素显示效果em元素样式strong元素样式user agent stylesheet中em元素样式user agent stylesheet中strong元素样式用户样式Chrome中用户样式的修改FireFox中用户样式的修改补充说明链接样式嵌入样式行内样式样式来源总结参考样式来源CSS样式共有5个来源，它们分别是浏览器默认样式\color{#FF3030}{浏览器默认样式}浏览器默认样式、用户样式\color{#FF3030}{用户样式}用原创 2021-01-25 22:19:02 · 1172 阅读 · 0 评论 -
一篇文章带你初步了解—CSS特指度
11个class的特指度是否比1个ID大?11个class的特指度是否比1个ID大?css选择器ICE计算公式11个class的特指度是否比1个ID大?css选择器css选择器决定css样式能渲染到对应的元素上。元素选择器：Class选择器：ID选择器：ICE计算公式单独的id、class和元素选择器很容易理解，但要是出现两种甚至三种不同选择器混合使用时又该如何计算特制度呢?要解决这个问题,不得不提到ICE计算公式:ID-Class-Element。接下来再看一个3个选择器作用在同原创 2021-01-20 23:42:32 · 462 阅读 · 0 评论 -
有趣的css—隐藏元素的7种思路
css隐藏元素的11种方法css隐藏元素前言第一种：display: none第二种：visibility: hidden第三种：opacity: 0第四种：transform: scale(0, 0)第五种：width: 0;height: 0;overflow: hidden第六种：transparent第七种：rgba(0,0,0,0)第八种：hsla(0,0%,0%,0)第九种：filter: opacity(0%)第十种：脱离屏幕显示位置第十一种：遮盖总结参考css隐藏元素前言和朋友聊天打屁原创 2021-01-16 17:39:50 · 729 阅读 · 0 评论