两个有趣的效果实现

1.实现如下效果：

方法一：使用两个div，分别设置背景色，并设置子元素倒角即可。

方法二：如果只用一个div，请问怎么实现？

.cont {

float:left;

margin:50px;

width:500px;

padding: 20px;

height:200px;

outline: 20px solid #ddd;

border-radius:20px;

background: #78c9db;

box-shadow:0 0 0 9px #ddd;

}

使用该方法前提：(√2-1)*border-radius的值 < box-shadow的值 < outline的值。

2. 实现蚂蚁行军的效果（IE10开始支持）

@keyframesant{

to{background-position:100%;}

}

.cont{

width:500px;

height:200px;

padding:2em;

border:1px solid transparent;

background:linear-gradient(#fff,#fff) padding-box,repeating-linear-gradient(-45deg,#000,#000 25%,#fff 0,#fff  50%) 0/.6em .6em;

animation:ant 12s linear infinite;

}

该文作为学习笔记，不做商用，参考CSS相关文献，在此感谢作者。