标签: css
-
css实现table响应式布局
效果图 在屏幕视口较为宽时,表现为一个整体 Table 的样式。 而当屏幕视口宽度较小时,通过媒体查询,Tab…
-
css实现一个转动的风车
风车有4个叶片,都是三角形,需要创造4个三角形。 如: border: 50px solid #f73833;…
-
利用伪元素、:checked、~兄弟选择器实现5星评分
效果如下: 关键代码: rate.value=parseInt(Array.from(document.que…
-
利用conic-gradient、伪元素和CSS变量实现圆盘度量计
效果 css :root { –primary-color: hsl(196, 78%, 61%); –s…
-
css在悬停时显示附加内容
步骤 创建一个在悬停时显示附加内容的卡片,步骤: 使用 overflow:hidden 在卡片上隐藏垂直溢出的…
-
css鼠标悬停时文字覆盖图片
下面实现悬停时的图像叠加文字的效果。 步骤 分别对叠加层的顶部和底部条使用 :before 和 :after …
-
css实现带有浮动标题的列表
下面来实现为每个部分创建一个带有浮动标题的列表。 步骤 使用 overflow-y: auto 允许列表容器垂…
-
CSS中完美的嵌套border radius(圆角)
如果处理不当,带圆角边框(border radius)的嵌套元素可能看起来非常错误。 幸运的是,有一个简单的数…
-
纯css展示tooltip
效果 HTML/CSS tooltip Hover Here to see the tooltip. You …
-
用css实现透明图片阴影效果
效果 box-shadow drop-shadow 你是否使用过 box-shadow 为透明的图片添加阴影,…