CSS3 动画相关属性实例大全（二)
（bottom 、box-shadow、clip、color 、column-count、column-gap、column-rule、column-rule-color、column-rule-width、column-width 属性）
本文目录：
一、bottom 属性（元素下外边距边界与其包含块下边界之间的偏移）
七、column-rule属性（设定分割线的宽度、样式和颜色）
八、column-rule-color属性（被画在两列之间的规则（线条）的颜色）
九、column-rule-width属性（被画在两列之间的规则（线条）的宽度）
上一篇：CSS3 动画相关属性实例大全（1)（@keyframes ，background属性，border 属性）
一、bottom 属性（元素下外边距边界与其包含块下边界之间的偏移）
bottom样式属性定义了定位元素下外边距边界与其包含块下边界之间的偏移，非定位元素设置此属性无效。
bottom的效果取决于元素的position属性：
| 属性 | 设置值 | 效果 |
| position | 设置为absolute或fixed时 | bottom属性指定了定位元素下外边距边界与其包含块下边界之间的偏移。 |
| 设置为relative时 | bottom属性指定了元素的下边界离开其正常位置的偏移。 | |
| 设置为sticky时 | 如果元素在 viewport 里面，bottom属性的效果和 position 为relative等同； 如果元素在 viewport 外面，bottom属性的效果和 position 为fixed等同。 | |
| 设置为static时 | bottom属性无效 | |
| 当 top和bottom同时指定时，并且 height没有被指定或者指定为auto或100%的时候， | top和bottom都会生效，在其他情况下，如果 height被限制，则top属性会优先设置，bottom属性则会被忽略。 |
-
<div id="animation24">逆境清醒div>
改变 bottom 属性，从 200 到 150px
二、box-shadow属性（在元素的框架上添加阴影效果）
box-shadow 属性用于在元素的框架上添加阴影效果。
你可以在同一个元素上设置多个阴影效果，并用逗号将他们分隔开。
该属性可设置的值包括阴影的 X 轴偏移量、Y 轴偏移量、模糊半径、扩散半径和颜色。
-
<div id="animation25">逆境清醒div>
改变 box-shadow 属性：从 0 到 100px
| 对于绝对定位的元素，元素下外边距边界与其包含块下边界之间的偏移。 对于相对定位定位的元素，元素的下边界离开其正常位置的偏移。 | |
| 一个负值、空值或正值，代表了： | |
| : 包含块高度的百分比 | |
| auto: | 规定： 对于绝对定位元素，元素将忽略此属性而以top属性为准，如果此时设置height: auto，将基于内容需要的高度设置宽度；如果top也为auto的话，元素的垂直位置就是它假如作为静态 (即 static) 元素时该在的位置。 |
| inherit: | 指代有明确计算结果的父级元素的值，（需要注意的是，父级元素并不一定是包裹该子元素的块级元素）。该值会根据父级元素的具体情况被处理为 |
三、clip属性（定义了元素的哪一部分是可见的）
clip 属性定义了元素的哪一部分是可见的。
clip 属性只适用于 position:absolute 的元素。
已弃用: 不再推荐使用该特性。虽然一些浏览器仍然支持它，但也许已从相关的 web 标准中移除，也许正准备移除或出于兼容性而保留。请尽量不要使用该特性，并更新现有的代码；参见本页面底部的兼容性表格以指导你作出决定。请注意，该特性随时可能无法正常工作。
-
<div id="animation26">逆境清醒div>
改变 clip 属性：从 150px的正方形到 50*100px长方形
四、color 属性（设置颜色值的前景色以及文本装饰）
color 属性设置颜色值的前景色以及文本装饰，并设置currentcolor (en-US)值。
currentcolor可以对其他颜色属性用作不直接的值
语法
| /* 关键词 */ | color: currentcolor; |
| /* | color: orange; color: tan; color: rebeccapurple; |
| /* | color: #090; color: #009900; color: #090a; color: #009900aa; |
| /* | color: rgb(34, 12, 64, 0.6); color: rgba(34, 12, 64, 0.6); color: rgb(34 12 64 / 0.6); color: rgba(34 12 64 / 0.3); color: rgb(34.0 12 64 / 60%); color: rgba(34.6 12 64 / 30%); |
| /* | color: hsl(30, 100%, 50%, 0.6); color: hsla(30, 100%, 50%, 0.6); color: hsl(30 100% 50% / 0.6); color: hsla(30 100% 50% / 0.6); color: hsl(30.0 100% 50% / 60%); color: hsla(30.2 100% 50% / 60%); |
| /* 全局值 */ | color: inherit; color: initial; color: unset; |
-
<div id="animation27">逆境清醒div>
改变 color 属性：从 黑 到 红
五、column-count属性（描述元素的列数）
column-count CSS 属性，描述元素的列数。
-
<div id="animation28">当你孤单无助地面对强敌时，谁会是那个信得过的战友？逆境清醒送你一只守护兔，她会像你爱她一样爱着你，她并不厉害，但即使失败了，小小的她也会再度勇敢站起来，保护自己的朋友们。div>
改变列数：从 1 到 3
六、column-gap属性（设置元素列之间的间隔大小）
column-gap 属性用来设置元素列之间的间隔（gutter）大小。
- normal 表示列之间的间隔宽度。在 多列布局 时默认间隔为 1em，其他类型布局默认间隔为 0。
用 来定义列之间的间隔大小。而且 值必须是非负数的。 用 （百分比）来定义列之间的间隔大小。同样的， 值也必须是非负数的。
-
<div id="animation29">当你孤单无助地面对强敌时，谁会是那个信得过的战友？逆境清醒送你一只守护兔，她会像你爱她一样爱着你，她并不厉害，但即使失败了，小小的她也会再度勇敢站起来，保护自己的朋友们。div>
改变 列的间隔属性，从普通到 100px
七、column-rule属性（设定分割线的宽度、样式和颜色）
column-rule 简写属性可以在多列布局中设定分割线的宽度、样式和颜色。
-
<div id="animation30">当你孤单无助地面对强敌时，谁会是那个信得过的战友？逆境清醒送你一只守护兔，她会像你爱她一样爱着你，她并不厉害，但即使失败了，小小的她也会再度勇敢站起来，保护自己的朋友们。div>
改变列间的规则：从 黑色1px间隔到 金色20px间隔
八、column-rule-color属性（被画在两列之间的规则（线条）的颜色）
column-rule-color 让你可以设置在多列布局中被画在两列之间的规则（线条）的颜色。
-
<div id="animation31">当你孤单无助地面对强敌时，谁会是那个信得过的战友？逆境清醒送你一只守护兔，她会像你爱她一样爱着你，她并不厉害，但即使失败了，小小的她也会再度勇敢站起来，保护自己的朋友们。div>
改变列间的规则颜色：从 黑色间隔到 绿色间隔
九、column-rule-width属性（被画在两列之间的规则（线条）的宽度）
column-rule-width 让你可以设置在多列布局中被画在两列之间的规则（线条）的宽度。
-
<div id="animation32">当你孤单无助地面对强敌时，谁会是那个信得过的战友？逆境清醒送你一只守护兔，她会像你爱她一样爱着你，她并不厉害，但即使失败了，小小的她也会再度勇敢站起来，保护自己的朋友们。div>
改变 列的宽度属性：从 1 到 50px
十、column-width 属性（设置列宽）
column-width属性在多列布局中设置理想的列宽。
容器将具有尽可能多的列，而其中任何列的宽度都小于该值。
如果容器的宽度小于指定值，则单列的宽度将小于声明的列宽。
-
<div id="animation33">当你孤单无助地面对强敌时，谁会是那个信得过的战友？逆境清醒送你一只守护兔，她会像你爱她一样爱着你，她并不厉害，但即使失败了，小小的她也会再度勇敢站起来，保护自己的朋友们。div>
改变 列间的宽度属性：从 5 到 20px
CSS3 动画相关属性实例大全系列目录：
- 1、CSS3 动画相关属性实例大全（一)（@keyframes ，background属性，border 属性）
- 2、CSS3 动画相关属性实例大全（二)（bottom 、box-shadow、clip、color 、column-count、column-gap、column-rule、column-rule-color、column-rule-width、column-width 属性）
- 3、CSS3 动画相关属性实例大全（三)（columns、filter、flex、flex-basis 、flex-grow、flex-shrink属性）
- 4、CSS3 动画相关属性实例大全（四)（font、height、left、letter-spacing、line-height 属性）
- 5、CSS3 动画相关属性实例大全（五)（margin 、max-height、max-width、min-height、min-width、opacity 、order 属性）
- 6、CSS3 动画相关属性实例大全（六)（outline 、outline-color 、outline-offset、outline-width、padding、padding-bottom、padding-left 、padding-right 、padding-top、perspective属性）
- 7、
|
|
|
|
| 给照片换底色（python+opencv） | 猫十二分类 | 基于大模型的虚拟数字人__虚拟主播实例 |
|
|
|
|
| 计算机视觉__基本图像操作（显示、读取、保存） | 直方图（颜色直方图、灰度直方图） | 直方图均衡化（调节图像亮度、对比度） |
|
|
|
|
|
| ||
|
| ||
| Three.js实例详解___旋转的精灵女孩(附完整代码和资源)（一） | ||
|
|
|
|
| 立体多层玫瑰绘图源码__玫瑰花python 绘图源码集锦 | ||
|
|
|
|
| 用代码写出浪漫__合集（python、matplotlib、Matlab、java绘制爱心、玫瑰花、前端特效玫瑰、爱心） | python爱心源代码集锦（18款） | |
|
|
|
|
|
|
| |
| 用代码过中秋，python海龟月饼你要不要尝一口？ | ||
|
|
|
|
| 草莓熊python turtle绘图（风车版）附源代码 | ||
|
|
| |
| 皮卡丘python turtle海龟绘图（电力球版）附源代码 | ||
|
|
|
|
| 2024年6月多家权威机构____编程语言排行榜__薪酬状况 | ||
|
|
|
|
| 【CSDN云IDE】个人使用体验和建议（含超详细操作教程）（python、webGL方向) | ||
|
|
|
|
评论记录：
回复评论：