border: 10px solid rgba(0,0,0,0.3); box-shadow

border: 10px solid rgba(0,0,0,0.3);

The properties that can be set, are (in order):

  • border-width,
  • border-style, and
  • border-color.

It does not matter if one of the values above are missing, e.g. border:solid #ff0000; is allowed.

border-style

Value Description Play it
none Specifies no border Play it »
hidden The same as “none”, except in border conflict resolution for table elements Play it »
dotted Specifies a dotted border Play it »
dashed Specifies a dashed border Play it »
solid Specifies a solid border Play it »
double Specifies a double border Play it »
groove Specifies a 3D grooved border. The effect depends on the border-color value Play it »
ridge Specifies a 3D ridged border. The effect depends on the border-color value Play it »
inset Specifies a 3D inset border. The effect depends on the border-color value Play it »
outset Specifies a 3D outset border. The effect depends on the border-color value Play it »
inherit Specifies that the border style should be inherited from the parent element
  • border-style:dotted solid double dashed;
    • top border is dotted
    • right border is solid
    • bottom border is double
    • left border is dashed
  • border-style:dotted solid double;
    • top border is dotted
    • right and left borders are solid
    • bottom border is double
  • border-style:dotted solid;
    • top and bottom borders are dotted
    • right and left borders are solid
  • border-style:dotted;
    • all four borders are dotted

color: #b14943;
cursor: pointer;
border-bottom: 1px dashed #b14943;

 

box-shadow:1px 1px 3px rgba(0,0,0,0.6);

box-shadow: h-shadow v-shadow blur spread color inset;

  • The horizontal offset of the shadow, positive means the shadow will be on the right of the box, a negative offset will put the shadow on the left of the box.
  • The vertical offset of the shadow, a negative one means the box-shadow will be above the box, a positive one means the shadow will be below the box.
  • The blur radius (optional), if set to 0 the shadow will be sharp, the higher the number, the more blurred it will be.
  • The spread radius (optional), positive values increase the size of the shadow, negative values decrease the size. Default is 0 (the shadow is same size as blur).
  • Color

Inner Shadow

.shadow {
   -moz-box-shadow:    inset 0 0 10px #000000;
   -webkit-box-shadow: inset 0 0 10px #000000;
   box-shadow:         inset 0 0 10px #000000;
}

One-Side Only

Using a negative spread radius, you can get squeeze in a box shadow and only push it off one edge of a box.

.one-edge-shadow {
	-webkit-box-shadow: 0 8px 6px -6px black;
	   -moz-box-shadow: 0 8px 6px -6px black;
	        box-shadow: 0 8px 6px -6px black;
}
reference
http://css-tricks.com/snippets/css/css-box-shadow/
Advertisements
生活在西班牙

自己动手丰衣足食

BlueAsteroid

Just another WordPress.com site

Jing's Blog

Just another WordPress.com site

Start from here......

我的心情魔方

天才遠私廚

希望能做一個分享各種資訊的好地方

语义噪声

西瓜大丸子汤的博客

笑对人生,傲立寰宇

Just another WordPress.com site

Where On Earth Is Waldo?

A Project By Melanie Coles

the Serious Computer Vision Blog

A blog about computer vision and serious stuff

Cauthy's Blog

paper review...

Cornell Computer Vision Seminar Blog

Blog for CS 7670 - Special Topics in Computer Vision

datarazzi

Life through nerd-colored glasses

Luciana Haill

Brainwaves Augmenting Consciousness

槑烎

1,2,∞

Dr Paul Tennent

and the university of nottingham

turn off the lights, please

A bunch of random, thinned and stateless thoughts around the Web