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

最新推荐文章于 2024-07-26 08:45:03 发布

a5142903667572

最新推荐文章于 2024-07-26 08:45:03 发布

阅读量2.4k

点赞数

本文链接：https://blog.csdn.net/a5142903667572/article/details/26687077

版权

本文介绍如何利用CSS3的box-shadow属性，结合inset参数和rgba()函数，创建带有内嵌（inset）效果及透明度的盒子阴影。

摘要由CSDN通过智能技术生成

使用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);