css3md

c3列

c3创建多列

使用column-count属性

<style> 
.newspaper{
	column-count:3;
}
</style>

<div class="newspaper">
“当我年轻的时候，我梦想改变这个世界；当我成熟以后，我发现我不能够改变这个世界，我将目光缩短了些，决定只改变我的国家；当我进入暮年以后，我发现我不能够改变我们的国家，我的最后愿望仅仅是改变一下我的家庭，但是，这也不可能。当我现在躺在床上，行将就木时，我突然意识到：如果一开始我仅仅去改变我自己，然后，我可能改变我的家庭；在家人的帮助和鼓励下，我可能为国家做一些事情；然后，谁知道呢?我甚至可能改变这个世界。”
</div>

列宽度指定

column-width属性,能指定列的宽度

.newspaper
{
	column-width:50px;
}

以上的俩个属性也可以合并起来

使用column属性

语法

columns: column-width column-count;

列的间隙

使用column-gap 属性可以指定列之间的间隙

.newspaper
{
	column-count:3;
	column-gap:40px;
}

<div class="newspaper">
当我年轻的时候，我梦想改变这个世界；当我成熟以后，我发现我不能够改变这个世界，我将目光缩短了些，决定只改变我的国家；当我进入暮年以后，我发现我不能够改变我们的国家，我的最后愿望仅仅是改变一下我的家庭，但是，这也不可能。当我现在躺在床上，行将就木时，我突然意识到：如果一开始我仅仅去改变我自己，然后，我可能改变我的家庭；在家人的帮助和鼓励下，我可能为国家做一些事情；然后，谁知道呢?我甚至可能改变这个世界。
</div>

列边框

column-rule-style 属性指定了列与列间的边框样式

div{
	column-count:3;
	column-gap:40px;
	column-rule: 4px outset #ff00ff;
 }

列横跨

column-span属性用来指定一个元素能横跨多少列

.newspaper
{
	column-count:3;
}
h2
{
	column-span:all;
}

的值有1和all

值为1

c3图片

使用 border属性来创建一个缩略图

a {
    display: inline-block;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 5px;
    transition: 0.3s;
}

a:hover {
    box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
}

以下是普通效果

以下是鼠标悬浮效果

图片周围出现阴影,显得很美观

响应式图片

使用以下代码

img {
    max-width: 100%;
    height: auto;
}

图片能根据视窗大小进行自适应

图片滤镜

filter属性为元素添加可视效果

.blur {
	filter: blur(4px);
}
.brightness {
	filter: brightness(250%);
}
.contrast {
	;filter: contrast(180%);
}
.grayscale {
	filter: grayscale(100%);
}
.huerotate {
	filter: hue-rotate(180deg);
}
.invert {
	filter: invert(100%);
}
.opacity {
	filter: opacity(50%);
}
.saturate {
	filter: saturate(7);
}
.sepia {
	filter: sepia(100%);
}
.shadow {
	filter: drop-shadow(8px 8px 10px green);
}

本次清明节网站元素变灰白就可以使用这个效果