column
columns
简写属性，用于设置列数和列的宽度
columns：[ column-width ] || [ column-count ]
属性值说明：
（1）.column-width：可选，规定每一列的宽度。
（2）.column-count：可选，规定列的数量
column-width
属性可以设置列的宽度。
column-width: auto|length;
属性值解析：
（1）.auto：默认值，它的值由其他相关属性决定。
（2）.length：规定列的宽度，(CSS属性建议一个最佳列宽。 列宽是在添加另一列之前列将成为最大宽度),比如100px
column-count
属性用于规定列的数量
column-count: auto || num
属性值解析:
（1）.auto：默认值，列的数目根据其他相关属性确定。
（2）.num：数值，用来规定列的数目。
column-gap
属性用来规定列与列之间的距离
column-gap: normal |<length>
属性值解析：
（1）.normal：默认值，默认情况默认值就是当前字体大
length：长度值，可以为px、em或者百分比等。
column-rule
属性用来规定列与列之间的边框样式，
分界线，
不占像素位置，
不会扩充容器宽度
column-rule:<column-rule-width> || <column-rule-style> ||<column-rule-color>
属性值解析:
（1）.column-rule-width：规定边框的宽度，默认值是medium”。
（2）.column-rule-style：规定边框的样式，其默认值为“none”。
（3）.column-rule-color：规定边框的颜色，其默认值为前景色color的值，可以设置其为透明。
column-span
属性用来规定跨越的列数
column-span: none|| all;
参数解析:
（1）.：默认值，表示不跨越任何列。
（2）.all：表示跨越所有的列。
column-fill
列填充CSS属性控制如何将内容划分为列。内容要么是平衡的，这意味着所有列中的内容将具有相同的高度，要么使用auto，只占用内容需要的空间。
- auto
指示列按顺序填充的关键字。
- balance
表示内容在列之间平均分配。
filter
filter属性用来定义滤镜效果，它可以改变元素的透明度、对比度、亮度和模糊度等
如果一次设置多个属性，使用空格分隔
取值：
opacity:
转化图像的透明程度。值定义转换的比例。值为0%则是完全透明，值为100%则图像无变化。值在0%和100%之间，则是效果的线性乘子，也相当于图像样本乘以数量 若值未设置，值默认是1
blur：
语法结构:
给图像设置高斯模糊。“radius”一值设定高斯函数的标准差，或者是屏幕上以多少像素融在一起，所以值越大越模糊；如果没有设定值，则默认是0；这个参数可设置css长度值，但不接受百分比值
drop-Shadow:
语法结构:
给图像设置一个阴影效果。阴影是合成在图像下面，可以有模糊度的，可以以特定颜色画出的遮罩图的偏移版本 函数接受<shadow>（在CSS3背景中定义）类型的值，除了“inset”关键字是不允许的。该函数与已有的box-shadow box-shadow属性很相似；不同之处在于，通过滤镜，一些浏览器为了更好的性能会提供硬件加速。 <shadow>参数如下：
- <offset-x> <offset-y> (必须)——
这是设置阴影偏移量的两个 <length>值. - <offset-x> 设定水平方向距离， 负值会使阴影出现在元素左边
- <offset-y>设定垂直距离.负值会使阴影出现在元素上方
- 查看 <length>可能的单位.
如果两个值都是0, 则阴影出现在元素正后面 (如果设置了 <blur-radius> and/or <spread-radius>，会有模糊效果)
- 查看 <length>可能的单位.
- <blur-radius> (可选)——
这是第三个 <length>值. 值越大，越模糊，则阴影会变得更大更淡.不允许负值 若未设定，默认是0 (则阴影的边界很锐利) - <spread-radius> (可选)——
这是第四个 <length> 值. 正值会使阴影扩张和变大，负值会是阴影缩小.若未设定，默认是0 (阴影会与元素一样大小).
注意: Webkit, 以及一些其他浏览器 不支持第四个长度，如果加了也不会渲染 - <color> (可选)——
查看 <color>该值可能的关键字和标记。若未设定，颜色值基于浏览器。在Gecko (Firefox), Presto (Opera)和Trident (Internet Explorer)中， 会应用 color属性的值。另外，如果颜色值省略，WebKit中阴影是透明的
brightness
给图片应用一种线性乘法，使其看起来更亮或更暗。如果值是0%，图像会全黑。值是100%，则图像无变化。其他的值对应线性乘数效果。值超过100%也是可以的，图像会比原来更亮。如果没有设定值，默认是1
contrast
contrast( )——
调整图像的对比度。值是0%的话，图像会全黑。值是100%，图像不变。值可以超过100%，意味着会运用更低的对比。若没有设置值，默认是1
grayscale
将图像转换为灰度图像。值定义转换的比例。值为100%则完全转为灰度图像，值为0%图像无变化。值在0%到100%之间，则是效果的线性乘子。若未设置，值默认是0
hue-rotate
给图像应用色相旋转。“angle”一值设定图像会被调整的色环角度值。值为0deg，则图像无变化。若值未设置，默认值是0deg。该值虽然没有最大值，超过360deg的值相当于又绕一圈
invert
反转输入图像。值定义转换的比例。100%的价值是完全反转。值为0%则图像无变化。值在0%和100%之间，则是效果的线性乘子 若值未设置，值默认是0。
saturate
转换图像饱和度。值定义转换的比例。值为0%则是完全不饱和，值为100%则图像无变化。其他值，则是效果的线性乘子。超过100%的值是允许的，则有更高的饱和度。 若值未设置，值默认是1。
sepia
将图像转换为深褐色。值定义转换的比例。值为100%则完全是深褐色的，值为0%图像无变化。值在0%到100%之间，则是效果的线性乘子。若未设置，值默认是0。
url
url()——
URL函数接受一个XML文件，该文件设置了 一个SVG滤镜，且可以包含一个锚点来指定一个具体的滤镜元素
例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>filter</title>
<style>
.main{
display: inline-flex;
background: rgb(238, 161, 89);
flex-wrap: wrap;
}
.item{
font-size: 20px;
height: 200px;
width: 200px;
background: rgb(190, 65, 65);
margin: 10px;
}
.item1{
filter: opacity(50%);
}
.item2{
filter:blur(5px);
}
.item3{
filter:drop-shadow(10px 10px 15px red );
}
.item4{
filter:brightness(2);
}
.item5{
filter: contrast(0.536);
}
.item6{
filter: grayscale(0.566);
}
.item7{
filter: hue-rotate(56deg);
}
.item8{
filter: invert(5);
}
.item9{
filter: saturate(0.5);
}
.item10{
filter: sepia(50%);
}
.item11{
/* 这个不会用 */
filter: url(test.svg);
}
.item12{
filter:unset;
}
</style>
<link rel="stylesheet" href="test.svg#c1">
</head>
<body>
<div class="main">
<div class="item item1">1</div>
<div class="item item2">2</div>
<div class="item item3">3</div>
<div class="item item4">4</div>
<div class="item item5">5</div>
<div class="item item6">6</div>
<div class="item item7">7</div>
<div class="item item8">8</div>
<div class="item item9">9</div>
<div class="item item10">10</div>
<div class="item item11"><img src="test.svg" alt=""></div>
<div class="item item12">12</div>
</div>
</body>
</html>
<!--test.svg-->
<svg width="200" height="200" style="background:black " xmlns="http://www.w3.org/2000/svg">
<polygon points="100 0 200 100 100 200 0 100" fill="url(#red_orange)" />
<defs>
<linearGradient id="red_orange" x1="100%" x2="0%" y1="0%" y2="100%">
<stop offset="0%" stop-color="red" stop-opacity="1"></stop>
<stop offset="100%" stop-color="orange" stop-opacity="1"></stop>
</linearGradient>
</defs>
</svg>
网友评论