css+写花边 |css阴影的透明度

/*设置一个div作为容器*/
div{
border: 1px solid black;
width: 300px;
height: 300px;
position: relative;
}
/*设置边框元素*/
div:before{
content: "";
position: absolute;
top: -5px; left: -5px; right: -5px; bottom: -5px;
border: 5px solid white;
z-index: -1;
}
/*设置花瓣元素*/
div:after{
content: "";
position: absolute;
z-index: -2;
border: 60px solid white;
border-radius: 50%;
transform: translateX(-50%);
}
/*设置花心元素*/
div span{
display: block;
position: absolute;
z-index: -1;
margin-top: -40px;
left: 50%;
width: 80px;
height: 80px;
background-color: white;
border-radius: 50%;
transform: rotate(45deg) translateX(-50%);
}

通过以上代码，大家可以实现一个简单的花边效果。首先大家设置一个div作为容器，然后使用:before和:after伪元素来分别创建边框和花瓣。其中:before的border样式需要比容器的宽度和高度都多5px，这样可以将超出容器的边框隐藏起来。而:after的border样式则需要设置一个大一些的数值，这样才能看出花瓣的形状。

接着，大家还需要设置一个花心元素，可以使用span标签来创建。将其位置设置在容器正中央，再使用rotate和translateX属性，将其旋转45度并向左平移一定距离，就可以得到一个完整的花边效果了。

这只是一个简单的例子，通过不同的参数设置，大家可以创建出各种花边效果。当然也可以使用其他的CSS属性，比如渐变、阴影等等，让花边更加真实、立体化。