小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

有趣的前端css特效-美国队长的盾牌

上面这个图相信大家都不陌生吧，没错，这就是漫威英雄，美国队长的盾牌。作为漫威C位英雄的美国队长，是二战时期的超级士兵，盾牌就是他最的最强武器。 身为美队颜值粉，当然也会为他的盾牌打电话咯。 下面我们来使用我的武器“CSS”复刻美队的盾牌吧

1.首先，国际惯例，定义父容器

众所周知，美队的盾牌是个圆。在css上很容易表现。 这里我们先将父容器定义成一个正方形。然后将边框弧度设置成50%。就能得到一个原型了。 代码如下

 div{
    width: 250px;
    height: 250px;
    border-radius: 50%;
    background: red;
}

这里为了方便直观，可以将父容器全屏居中（其实是强迫症）

div{
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -125px;
    margin-top: -125px; 
}

2. 给圆形盾牌上色

background: 
            //盾牌左上-右下光泽度
            linear-gradient(45deg,rgba(255,255,255,0) 35%,rgba(255,255,255,0.4) 50%,rgba(255,255,255,0) 65%),
            //盾牌左下-右上光泽度
            linear-gradient(-45deg,rgba(255,255,255,0) 35%,rgba(255,255,255,0.4) 50%,rgba(255,255,255,0) 65%),
            //盾牌中心竖向阴影
            linear-gradient(to right,rgba(0,0,0,0) 35%,rgba(0,0,0,0.2) 50%,rgba(0,0,0,0) 65%),
            //盾牌中心横向阴影
            linear-gradient(to bottom,rgba(0,0,0,0) 35%,rgba(0,0,0,0.2) 50%,rgba(0,0,0,0) 65%),
            //盾牌底色圆圈（红银蓝）
            radial-gradient(ellipse at center,#0033b0 20%,#ce0021 20%,#ce0021 35%,#bbb 35%,#bbb 55%,#ce0021 55%); 

此时美国队长的盾牌框架就基本搭建成功了。

为了使结构更立体，可以给父容器div加上阴影。色号比外圈红色略深一些

box-shadow: 0 3px 0 #a20917;

3.盾牌中心还缺少标志性的小星星

这里我们使用伪类来完成小星星，css有个特殊属性叫content。将它的值定义为特殊符号 ★ 就可以轻松完成。 代码如下：

div:before {
    position: absolute;
    text-align: center;
    width: 70px;
    height: 70px;
    margin-left: -35px;
    margin-top: -35px;
    top: 50%;
    left: 50%;
    content: '★';
    font-size: 70px;
    line-height: 65px;
}

接下来还可以通过补充一些细节

    color: #ddd;
    border-radius: 50%;
    background: rgba(0,80,170,0.5);
    text-shadow: -1px 1px 0 #3e92ff, 1px -1px 0 #1e436d;

小星星就完成啦

将代码合并就可以看到盾牌啦

4.给盾牌加上投影

想要让盾牌更加立体，还需要加上一些阴影效果的 代码如下

div:after {
    width: 200px; 
    height: 30px; 
    margin-left: -100px; 
    top: 215px; 
    left: 50%; 
    border-radius: 50%; 
    box-shadow: 0 50px 20px rgb(0 0 0 / 15%); 
}

---

到这里美国队长的武器盾牌，就完成啦。我要去重温漫威了。