box-shadow là một thuộc tính css3 khá hay dùng để tạo bóng đổ cho một đối tượng bất kì mà trước kia chúng ta làm web phải dùng đến hiệu ứng của Photoshop sau đó cắt hình để làm. Sau đây là hướng dẫn sử dụng thuộc tính box-shadow trong css3, bài hướng dẫn chi tiết giúp bạn dễ dàng nắm bắt được cách dùng.

Đầu tiên là cách dùng như sau:

div
{
      box-shadow: 10px 10px 5px 5px  #999 inset;
}

Tương ứng với các giá trị phía dưới:

Selector
{
       box-shadow: h-shadow v-shadow blur spread color inset;
}

• Selector: Là đối trượng được chọn ví dụ như div, ul, li, a, class, id...
• shadow : Đổ bóng theo chiều ngang (đơn vị px).
• v-shadow: Đổ bóng theo chiều dọc (đơn vị px).
• blur : Độ mờ bóng đổ (đơn vị px).
• spread : Độ rộng của bóng đổ
• color : Màu bóng đổ
• inset: Đặt hiệu ứng bên trong đối tượng, nếu không dùng thuộc tính này thì mặc định bóng đổ sẻ ở bên ngoài đối tượng.

Ví dụ 1:

div
{
      box-shadow: 0px 0px 6px 6px #000;
}

Ví dụ 2:

div
{
     box-shadow: -5px -5px 5px 5px blue;
}

Ví dụ 3:

div
{
     box-shadow: 5px 5px 5px 5px red;
}

Lưu ý: Thuộc tính box-shadow là css3 nên chỉ hỗ trợ trên IE9+, Firefox, Chrome, Opera, and Safari 5.1.1.

Chúc các bạn thành công!

Có lẻ nhiều người học web, làm web sẻ hỏi như vậy và chắc có nhiều bạn vẫn chưa nhận được câu trả lời rõ ràng. Sau đây xin chia sẻ một bài viết giải đáp thắc mắc này của các bạn, bài viết này xin trích dẫn từ danweb.vn để mọi người cùng tham khảo

Ngoài ra, cho thấy nhiều hiệu ứng mà CSS3 cung cấp trước đây đã đòi hỏi các hình ảnh được tạo ra bằng cách sử dụng một ứng dụng riêng biệt và được lưu trữ dưới dạng GIF, JPG, PNG. Các hiệu ứng này bao gồm các hình bóng rơi trên văn bản và các hộp, các góc được làm tròn trên các đường viền, và sử dụng tính mờ đục để tạo ra một sự xuất hiện mờ.
Nhiều tính năng trong số đó (chẳng hạn như độ mờ đục và các góc được làm tròn) là tương đối phổ biến trong sử dụng do thực tế là chúng làm giảm nhiều khả năng tùy chỉnh trong các trình duyệt Web.
Tìm hiểu về các cách bố trí nhiều cột mới mà bạn có thể tạo ra chúng khi sử dụng CSS3. Các cách bố trí này là một sự tạo mẫu cho bố cục tờ báo ở nơi văn bản sẽ trải dài trên một số các cột đã đặt hoặc theo chiều rộng cột cụ thể khi cần.
Một tính năng khác sẽ được thảo luận là vấn đề bao gồm các phông chữ Web phi tiêu chuẩn nhờ sử dụng thẻ @font-face.
Cuối cùng, sẽ giới thiệu một số các tính năng CSS3 mới khác, chẳng hạn như sự hỗ trợ cho HSL (Hue, Saturation và Lightness - Màu sắc, độ bão hòa, cường độ ánh sáng) và các mô hình màu RGBA (Đỏ, Xanh lá cây, Xanh da trời, và Alpha).

Các bộ chọn mới
Bộ chọn CSS đề cập đến cách thức để định kiểu (các) phần tử HTML theo một bảng định kiểu. Ví dụ, để đặt một đường viền xung quanh tất cả các phần tử <div> bạn sẽ sử dụng bộ chọn div: div { border: 1px solid #000; }.
Để quét một màu nền cho tất cả các phần tử có làm nổi bật lớp, sử dụng bộ chọn: .highlight { background-color: yellow; }.
Để thay đổi độ rộng của một phần tử có giá trị thuộc tính ID là myDiv, sử dụng: #myDiv { width: 250px; }.
Tuy nhiên, có thể kết hợp các bộ chọn này, do đó để chọn tất cả các phần tử <div> có làm nổi bật lớp highlight, sử dụngdiv.highlight, hoặc chọn phần tử <div> có ID là myDiv bạn sẽ sử dụng div#myDiv.
Ngoài các bộ chọn đơn giản này, CSS cũng bao gồm một loạt các bộ chọn phức tạp hơn. Ví dụ, có thể sử dụng bộ chọn input[type="text"] để chọn chỉ các phần tử đầu vào có chứa một kiểu thuộc tính có giá trị là text hoặc bạn có thể sử dụng lớp-giả: hover để định kiểu một phần tử khi chuột ở trên nó, ví dụ: a:hover { color: red; }.
Tất cả các bộ chọn đều được cung cấp để làm cho việc chọn lựa một phần tử theo kiểu dáng dễ dàng hơn. Với CSS3, thậm chí có nhiều bộ chọn mới hơn đã được thêm vào hòa trộn, tất cả chúng đều giúp nhà phát triển thực hiện dễ dàng hơn và làm giảm số lượng mã HTML và JavaScript cần phải viết.

Các bộ chọn thuộc tính:
E[foo^="bar"]
Chọn một phần tử, E, mà thuộc tính foo của nó bắt đầu chính xác bằng chuỗi bar
E[foo$="bar"]
Chọn một phần tử, E, mà thuộc tính foo của nó kết thúc chính xác bằng chuỗi bar
E[foo*="bar"]
Chọn một phần tử, E, mà thuộc tính foo của nó chứa chuỗi bar

Các lớp-giả có cấu trúc
E:root
Chọn một phần tử, E, gốc của tài liệu (thẻ <html>)
E:nth-child(n)
Chọn một phần tử, E, phần tử con thứ n của phần tử cha mẹ
E:nth-last-child(n)
Chọn một phần tử, E, phần tử con cuối cùng thứ n của phần tử cha mẹ
E:nth-of-type(n)
Chọn một phần tử, E, phần tử anh chị em thứ n của kiểu
E:nth-last-of-type(n)
Chọn một phần tử, E, phần tử anh chị em cuối cùng thứ n của kiểu
E:last-child
Chọn một phần tử, E, mà phần tử của nó là phần tử con cuối cùng của phần tử cha mẹ (Lưu ý rằng E:first-child đã được định nghĩa trước trong CSS2)
E:first-of-type
Chọn một phần tử, E, phần tử anh chị em đầu tiên của kiểu
E:last-of-type
Chọn một phần tử, E, phần tử anh chị em cuối cùng của kiểu
E:only-child
Chọn một phần tử, E, phần tử con duy nhất của phần tử cha mẹ
E:only-of-type
Chọn một phần tử, E, phần tử anh chị em duy nhất của kiểu
E:empty
Chọn một phần tử, E, không có phần tử con nào (bao gồm cả các nút văn bản)

Lớp-giả target 
E:target
Chọn một phần tử, E, là đích của URI đang biểu thị

Phần tử UI nói đến các lớp-giả
E:enabled
Chọn một phần tử giao diện người dùng, E, được kích hoạt
E:disabled
Chọn một phần tử giao diện người dùng, E, bị vô hiệu hóa
E:checked
Chọn một phần tử giao diện người dùng, E (một nút radio hay hộp kiểm tra), được đánh dấu chọn hoặc được chọn
Các lớp-giả Negation
E:not(s)
Chọn một phần tử, E, không khớp với bộ chọn đơn giản s

Bộ kết hợp anh chị em chung
E ~ F
Chọn một phần tử, F, có một phần tử E đứng trước
Sự hỗ trợ của trình duyệt cho các bộ chọn thuộc tính mới và bộ kết hợp anh chị em chung là tuyệt vời, do chúng làm việc trên hầu như tất cả các trình duyệt Web hiện đại.
Sự hỗ trợ cho các lớp-giả mới có trong các phiên bản mới nhất của hầu hết các trình duyệt, nhưng bạn có thể cần có cả các bản thay thế cho các trình duyệt cũ hơn như Internet Explorer 6/7 và Firefox 3.0.

Các hiệu ứng mới
 Mặc dù các bộ chọn mới có lẽ là những tính năng làm giảm đau đầu cho các nhà phát triển nhiều nhất, những cải tiến mà mọi người muốn nhìn thấy là các hiệu ứng mới sáng chói có sẵn.

Các hiệu ứng này được đơn giản hóa thông qua một loạt các đặc tính CSS mới, bao gồm:
• nền
• mẫu-nền
• gốc-nền
• kích thước-nền
• bán kính-đường viền (các góc được làm tròn)
• hình ảnh-đường viền
• màu sắc-đường viền (các đườmg viền gradient)
• hình bóng-hộp (bóng rơi trên các hộp không có hình ảnh)
• kích thước-hộp
• độ mờ
• khoảng trống-đường bao
• chỉnh lại kích thước
• tràn-văn bản
• hình bóng-văn bản
• bọc-từ

Các bố trí nhiều cột
Các cách bố trí nhiều cột CSS3 tính đến văn bản được trải rộng trên một số cột, giống như bạn có thể thấy trong một tờ báo. Điều này có thể được thực hiện theo hai cách, hoặc sử dụng đặc tính độ rộng cột, ở đó bạn định nghĩa mỗi cột sẽ rộng bao nhiêu (số lượng các cột được xác định bởi các vùng có sẵn), hoặc bằng cách sử dụng đếm-cột, ở đó bạn định nghĩa số lượng các cột cần được sử dụng. Sau đó độ rộng sẽ thay đổi dựa vào vùng có sẵn cho mỗi cột.
Các tính năng khác về các cách bố trí nhiều cột bao gồm đặc tính khoảng hở cột, cho phép nhà phát triển định nghĩa khoảng không gian cần có giữa các cột khi sử dụng phương thức độ rộng cột.
Đặc tính quy tắc-cột cho phép một quy tắc định kiểu-đường viền được đặt giữa các cột. Cuối cùng có đặc tính: phân phối-không gian-cột, xác định cách để lại khoảng trống cần được phân bổ giữa các cột.
Các cách bố trí các cột hiện được các trình duyệt Mozilla và WebKit hỗ trợ. Hiện nay, các cách bố trí này được thực hiện bằng các đặc tính độc quyền tạm thời được bắt đầu bằng - moz hay -Webkit, tương ứng. Khi đặc tả này đã được hoàn tất, các trình duyệt này cuối cùng sẽ chuyển sang các đặc tính tiêu chuẩn CSS.

Các phông chữ Web
Các phông chữ Web đã thực sự được đề xuất cho CSS2 và đã có sẵn trong Microsoft Internet Explorer từ phiên bản 5 nhưng việc này đòi hỏi sử dụng định dạng phông chữ .eot độc quyền (Embedded Open Type - Kiểu mở nhúng), và không ai trong số các nhà cung cấp trình duyệt khác lại chọn triển khai nó. Do đó các phông chữ Web không bao giờ thực sự được chọn trên các trang Web dựa vào CSS2.
Tuy nhiên, với các phiên bản mới nhất của các trình duyệt Firefox, Safari, Chrome, và Opera, bây giờ bạn có thể sử dụng quy tắc @font-face để sử dụng bất kỳ các phông chữ được cấp phép .ttf (TrueType) hoặc .otf (OpenType) trên trang Web của mình.
Có thể sử dụng phông chữ này theo các quy tắc CSS riêng của bạn, chẳng hạn như: article p { font-family: Alexa, Arial, Helvetica, sans-serif; }.
Hãy nhớ rằng các phông chữ giống như các hình ảnh — nếu chúng không phải là của riêng bạn thì bạn có thể cần giấy phép để sử dụng chúng trên Web.
Ngoài ra, bạn có thể trả tiền (hoặc tải về miễn phí) cho một số phông chữ trả phí một lần để có thể đưa các phông này vào các trang Web của bạn.

Các tính năng mới khác
CSS3 cũng bao gồm nhiều tính năng mới khác, gồm sự hỗ trợ cho các giá trị màu mới, đặc biệt là HSL (Hue, Saturation, Lightness) và hai giá trị màu có các đặc tính alpha — RGBA (Red, Green, Blue, Alpha) và HSLA (Hue, Saturation, Lightness, Alpha).
Các truy vấn phương tiện sẽ cho phép bạn định nghĩa kiểu dáng khác nhau cho các thiết bị khác nhau dựa vào kích thước khung nhìn của chúng.
Module tiếng nói của CSS3 cho phép bạn điều khiển các đặc tính tiếng nói cho một trình duyệt đọc màn hình bao gồm cả âm lượng, sự cân bằng, tốc độ, nén,...

Sau đây là hướng dẫn tạo menu dropdown ( Menu đỗ xuống) bằng css đơn giản.

Bước 1: Tạo một file html tạm đặt tên là menu.html với nội dung sau:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    </head>
    <body>
    <ul id="menu">
        <li>
            <a href="#">Menu 1</a>
        </li>
        <li><a href="#">Menu 2</a>
            <ul class="sub-menu">
                <li>
                    <a href="#">Sub Menu 1</a>
                </li>
                <li>
                    <a href="#">Sub Menu 2</a>
                </li>
                <li>
                    <a href="#">Sub Menu 3</a>
                </li>
                <li>
                    <a href="#">Sub Menu 4</a>
                </li>
            </ul>
        </li>
        <li><a href="#">Menu 3</a>
        </li>
        <li><a href="#">Menu 4</a>
            <ul class="sub-menu">
                <li>
                    <a href="#">Sub Menu 1</a>
                </li>
                <li>
                    <a href="#">Sub Menu 2</a>
                </li>
                <li>
                    <a href="#">Sub Menu 3</a>
                </li>
                <li>
                    <a href="#">Sub Menu 4</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">Menu 5</a>
        </li>
    </ul>
    </body>
    </html>

Bước 2 tạo một file css đặt tên là main.css chứa nội dung sau:

ul#menu, ul#menu ul.sub-menu {
    padding:0;
    margin: 0;
}
ul#menu li, ul#menu ul.sub-menu li {
    list-style-type: none;
    display: inline-block;
}
/*Link Appearance*/
ul#menu li a, ul#menu li ul.sub-menu li a {
    text-decoration: none;
    color: #fff;
    background: #666;
    padding: 5px;
    display:inline-block;
}
/*Make the parent of sub-menu relative*/
ul#menu li {
    position: relative;
}
/*sub menu*/
ul#menu li ul.sub-menu {
    display:none;
    position: absolute;
    top: 30px;
    left: 0;
    width: 100px;
}
ul#menu li:hover ul.sub-menu {
    display:block;
}

Sau khi đó lưu lại và chèn vào trước thẻ </head> của file menu.html đoạn code sau:

<link rel="stylesheet" href="styles/red_v04_home/css/main.css" />

Lưu lại và chạy thử bạn sẻ thấy kết quả. Lưu ý bạn có thể chỉnh lại style của menu theo ý mình bằng cách chỉnh file main.css.

Chúc bạn thành công!