Shadow effect demo and shadow effect demo

Shadow effect demo and shadow effect demo

I have nothing to do in the morning. I feel that the font shadow effect is still good-looking. So let's have a demo!

1. This is simple html. There is a tag or a box.

<Div class = "demo11"> I love exams </div>

2. css style. It feels good to write styles with css3.

.demo11 {    border: 1px dashed #f2b;    height: 150px;    width: 250px;    text-align: center;    line-height: 150px;    margin: 0 auto;    font-size: 50px;    color: orange;    text-shadow: 1px 1px rgba(197, 223, 248,0.8),2px 2px rgba(197, 223, 248,0.8),3px 3px rgba(197, 223, 248,0.8),4px 4px rgba(197, 223, 248,0.8),5px 5px rgba(197, 223, 248,0.8),6px 6px rgba(197, 223, 248,0.8);}

 

3. Attached

A simple font shadow effect is like this, and you can also define the font style (font-family) to achieve better results!

Above, this is a small demo of the out-of-font shadow;

Next, let's take a look at inner Yin Ying,

1. html Style

<Div class = "block black" style = "background-color: #444;"> <span style = "color: rgba (0, 0, 0, 0.5 ); "> I love test <br> I love test </span> </div> <br clear =" all "> <div class =" block white "> <span style =" color: rgba (128,128,128, 0.5); "> I love test <br> I love test </span> </div>

2. Simple css style

<style>.block {  font-size: 2em;  font-weight: bold;  margin: 2px;  padding: 2px;  border: solid #AAA 1px;  display: inline-block;}.black {  text-shadow: 1px 1px 2px #888, 0 0 0 #000;}.white {  text-shadow: 1px 1px 2px #FFF, 0 0 0 #000;}    </style>

It's easy to understand!

I have attached a thumbnail for your reference!

In this case, the inner shadow will come out. Although it is not very nice, it is also very practical!