三种方法实现弹出框边框半透明和圆角的效果

发现支付宝的一个充值抽红包的系统里面有个弹出对话框,边框半透明效果,就想着自己做一个弹出对话框效果,

用三种方法实现弹出框边框半透明和圆角的效果

1.用rgba来实现背景半透明,设置内边距

2.设置border颜色半透明,利用background-clip设置;

3.利用滤镜效果,实现空元素背景半透明

border-radius实现圆角效果

源码下载地址:http://download.csdn.net/my

html代码如下:


 

   
web前端蓝枫web前端蓝枫web前端蓝枫web前端蓝枫web前端蓝枫web前端蓝枫web前端蓝枫web前端蓝枫web前端蓝枫web前端蓝枫web前端蓝枫web前端蓝枫web前端蓝枫

 

 

   
web前端蓝枫web前端蓝枫web前端蓝枫web前端蓝枫web前端蓝枫web前端蓝枫web前端蓝枫web前端蓝枫web前端蓝枫web前端蓝枫web前端蓝枫web前端蓝枫web前端蓝枫

 

 

   
web前端蓝枫web前端蓝枫web前端蓝枫web前端蓝枫web前端蓝枫web前端蓝枫web前端蓝枫web前端蓝枫web前端蓝枫web前端蓝枫web前端蓝枫web前端蓝枫web前端蓝枫

   

 




css代码如下:


预览效果:




你可能感兴趣的:(css,css专题)