What are the best CSS3 properties?

I've covered the fancy design CSS3 properties in other posts (rounded corners, drop shadows etc.) now it's time to touch on those really useful CSS3 properties that will get you out of a tight spot.

text-overflow
This determines what happens to text which doesn't fit into an element or box and the overflow is hidden.
text-overflow: ellipsis - adds three dots ..
text-overflow: clip - clips the text inside the box
The following examples also require  white-space: nowrap AND overflow: hidden for them to work:

ellipsis text-overflow example that is being cut off

clip text-overflow example that is being cut off

overflow visible example that is not being cut off

resize
This allows an element to be resized by the user.  It uses resize:both and overflow:auto to fill the box as you move it around.

Grab the corner to resize this box

This example uses both text-overflow and resize.

This example uses resize: horizontal and text-overflow: ellipsis together!

word-wrap
This allows long words to be broken and placed on the next line.  Very useful for languages that have very long words and few spaces (Thai is an example of a language that can benefit from word-wrap)
word-wrap:break-word


background-size
CSS3 now allows you to change the size of an image in the background of an element (previously it was just the default size of the image so it had to be resizes)
background-size:80px 60px

background-origin
Now you can position the origin of the image in relation to the border, padding or content.  This becomes useful when you have an element with lots of padding and you want to get the image right to the edge of the padding.

background-origin:content-box
background-origin:padding-box
background-origin:border-box

which refers to the following CSS3 box model:

background-clip
Now that you can position the image in an element, you can also clip it, or cut the image at the edges to either the padding-box, border-box or content-box (see image above for the CSS3 box model of each of these boxes)
background-clip: padding-box
background-clip: border-box
background-clip: content-box

Multiple background images
And to add even more excitement to background images - you can also add more than one background image to each element with a comma separating the url source for each image file.
background-image:url(pic1.png),url(pic2.png);

background-attachment
This is not a CSS3 property (it's actually CSS1) but it fits nicely into this category and determines if the image in the background of an element scrolls with the content if you have overflow:scroll giving the box scroll bars.

background-attachment:fixed
background-attachment:scroll

For other CSS3 styles check out the following posts:

css3 online tool to generate new css3 styles 

make scalable buttons using css3 and rgba

html5 and css3 buttons tabs forms and tables

What are the best CSS3 properties?