最近弄了一些icon , 总结写box-shower和:befor伪元素的使用吧(after伪元素也是类似的)
/*左边的图效果可以直接利用一个box-shadow:15px 15px 0 0px blue,-15px -15px 0 0px blue;但是有时候所需要的icon要有一定的细节美感,那么要写成右边的这张图则需要用到下面的代码
采用这样写的目的是红色外有个白色边框和灰色外有个白色边框中有个白色的边框,底部的蓝色跟上面的两张图一样大小,这样看起来比较有层叠的效果,而且比较美观*/
box-shadow:a b 0 d blue;的使用我解释下a和b和d,记住a---水平为正向右移,b---垂直为正向下移,d---本体中宽或者高除以2的负值
例如下面的 下面的设为box-shadow:b b 0 -18px blue; -18刚刚好消失,这个临界值是怎么计算得来的,30/2+3=18,选本体的较小的宽或高,再除以2,有边框的加上边框的值,要设置阴影则从-18到0,表示阴影从无到跟本体一样大,从0到+oo,表示在原体大小的基础上变大
<style>
#id_contant_icon4{
width:40px;
height:30px;
margin: 30px 20px;
border:3px solid white;
background-color: gray;/*中间灰色*/
transform: skew(-45deg,20deg);/*transform和-webkit-transform同时一起作用才可以兼容手机 、firefox 、chrome的效果*/
-webkit-transform: skew(-45deg,20deg);/*transform和-webkit-transform同时一起作用才可以兼容手机 、firefox 、chrome的效果*/
box-shadow:15px 15px 0 -3px blue;/*下面蓝色*/
}
#id_contant_icon4:before{
content: '';
width:40px;
height:30px;
position: absolute;
margin-left: -15px;
margin-top: -15px;
border: 3px solid white;
background-color: red; /*红色上*/
}
</style>
</head>
<body>
<div>
<p id="id_contant_icon4"></span>
</div>
</body>
</html>
1344
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
