Shadow inside of a div | 易学教程

问题

Is it possible to display a shadow inside a div box without using pictures? Instead I want to use css commands.

So is there some command like: -webkit-box-shadow: 1px inset; ?

回答1:

in CSS3 theres box-shadow wich can also be inset to do exactly what you need. this is supported by the following browsers:

chrome >= 10.0 (>= 4.0 with -webkit-prefix)
firefox >= 4.0 (>= 3.5 with -moz-prefix)
IE >= 9.0
opera >= 10.5
safari >= 5.1 (>= 5.0 with -webkit-prefix)

回答2:

Yup there is a command inset. like this:

-webkit-box-shadow: 0 0 1px 3px #000 inset;
-moz-box-shadow: 0 0 1px 3px #000 inset;
box-shadow: 0 0 1px 3px #000 inset;

You can generate from here http://css3generator.com/

回答3:

You can use Box shadow generator for shadow effects. I will give an example to show how to use the box shadow generator.

Step 1: Go to : Box Shadow Generator

Step 2: adjust the shadow property you want to add.

Step 3: Then copy the css code using "copy text" button.

step 4: Then you can past the css code into the style sheet file.

Do like this.

<html>
<head>
    <title>Title</title>
    <style type="text/css">
    #banner{

        position: absolute;
        width: 100%;
        height: 150px;
        background-color: #4E6C88;
        -webkit-box-shadow: -1px 9px 18px 0px rgba(0,0,0,0.75);
        -moz-box-shadow: -1px 9px 18px 0px rgba(0,0,0,0.75);
        box-shadow: -1px 9px 18px 0px rgba(0,0,0,0.75);
    }

    </style>
</head>
<body>
 <div id="banner">    

 </div>
</body>
</html>

Thank you... ;)

来源：https://stackoverflow.com/questions/9665504/shadow-inside-of-a-div

标签

css

css3

Shadow