博客

施用CSS3生成一个inset盒子阴影（带透明度）

  • Post author:
  • Post category:其他


使用CSS3

生成一个

inset

盒子阴影

（带

透明度

）

在前面的例子里面， 用CSS3创建

一个

简单

盒子

的

阴影

的

透明度

。下面的例子，展示给你在box-shadow样式里面用CSS3和指定inset的参数，在在box-shadow使用rgba()。 

<!DOCTYPE html>
<html>
<head>
    <title>Setting the box shadow alpha on a container using CSS3</title>
    <style type="text/css">
        #box1 {
            -webkit-box-shadow: 10px 10px rgba(255, 0, 0, 0.3);
            -moz-box-shadow: 10px 10px rgba(0, 255, 0, 0.3);
            box-shadow: 10px 10px rgba(0, 0, 255, 0.3);
        }
 
        #box2 {
            -webkit-box-shadow: 10px 10px 15px rgba(255, 0, 0, 0.3);
            -moz-box-shadow: 10px 10px 15px rgba(0, 255, 0, 0.3);
            box-shadow: 10px 10px 15px rgba(0, 0, 255, 0.3);


版权声明：本文为a5142903667572原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。