Có ai biết cách tạo góc lõm như trong hình bằng CSS thuần không? Hiệu ứng 3D với các góc cong.

Trong bài viết này, cũng như bài viết trước, hiệu ứng được xây dựng bằng phần tử giả :sau đó. Để hiểu bản chất, bạn có thể đọc bài viết đó, ở đó tôi đã giải thích sơ đồ cách thức hoạt động của nó, tôi sẽ không lặp lại ở đây. Nói chung mọi thứ đều được thực hiện rất đơn giản và có thể cấu hình được các loại khác nhau các hiệu ứng. Trong ví dụ bên dưới, bạn có thể thấy cách tôi sắp xếp 3 phần uốn cong khác nhau với những thay đổi tối thiểu đối với mã.

Hãy bắt đầu theo thứ tự với cái đầu tiên, nó là cái cơ bản nhất và tất cả những phần còn lại đều được thực hiện dựa trên nó. Để bắt đầu, bạn cần quyết định khối nào sẽ được gán hiệu ứng, một cái bóng bất thường. Trong trường hợp của chúng tôi, đây sẽ là một khối - khối_bóng.

Block_shadow(vị trí:tương đối; chiều rộng:400px; chiều cao:150px; nền:#f7f7f7; ) .block_shadow:after( nội dung:""; vị trí: tuyệt đối; z-index:-1; top:0; đáy:0; trái :50px; phải:50px; -webkit-box-shadow:0 0 25px rgba(0,0,0,0.3); -moz-box-shadow:0 0 25px rgba(0,0,0,0.3); bóng:0 0 25px rgba(0,0,0,0.3); -moz-border-bán kính:200px / 50px bán kính đường viền:200px / 50px )

Bây giờ tôi sẽ mô tả chính xác điều gì tạo nên diện mạo này. Đầu tiên, khối được gán một vị trí liên quan đến, sau đó là chiều rộng, chiều cao và luôn là nền, ngay cả khi bạn có màu trắng. Sau đó chúng tôi gán phần tử giả :sau đó. Đối với nó, các tham số sau được đặt:

1. chức vụ- chỉ định vị trí - tuyệt đối.
2. chỉ số z- đặt nó thành âm -1 để ẩn nó sau khối.
3. trên:0;dưới:0;- khoảng cách từ trên xuống dưới là 0 pixel, nghĩa là có thể nhìn thấy bóng. Nếu bạn đặt giá trị thành - đứng đầu-50%, khi đó bóng phía trên sẽ ẩn sau khối và bạn sẽ có giao diện giống như khối thứ ba của ví dụ. Nếu cho - đáyđặt ở mức 50%, bóng dưới sẽ biến mất. 50% chỉ là ví dụ, bạn có thể cài đặt thứ gì đó của riêng mình và không ẩn hoàn toàn bóng nếu cần.
4. trái:50px;phải:50px;- đây là vết lõm từ các cạnh. Chúng tôi lùi lại 50 pixel để ẩn bóng ở hai bên. Chúng ta hãy đi về phía trước, để tạo phiên bản thứ hai của hiệu ứng, khi bóng đổ ở các bên, bạn chỉ cần thay đổi giá trị. Đặt các cạnh thành 0 và trên cùng và dưới cùng thành 50 pixel. Giá trị là 50, tất nhiên bạn có thể thay đổi nó, do đó bạn thay đổi kích thước của bóng.
5. bóng hộp- đây là một cái bóng, mọi thứ ở đây đều rõ ràng. Đặt màu sắc, độ trong suốt và kích thước mờ của bóng, hiện là 25 pixel.
6. bán kính đường viền- đây là việc làm tròn bóng để tạo hiệu ứng uốn cong tương tự. giá trị đầu tiên là 200 pixel, bán kính ngang bằng một nửa chiều rộng khối chính của chúng tôi - 400 pixel. 50 là bán kính thẳng đứng. Để triển khai ví dụ thứ hai - bóng ở các bên, bạn cần đảm bảo rằng giá trị thứ hai là nhiều hơn lần đầu tiên. Tất cả phụ thuộc vào kích thước của khối. Trong trường hợp của chúng tôi, ví dụ thứ hai có tỷ lệ 10px/50px.

Bạn có thể tùy chỉnh tất cả các thông số cho riêng mình, có thể thay đổi tùy thích, điều chính là không lạm dụng quá mức để không làm mất đi vẻ thực tế.

Trong phần giải thích đầu tiên, về cơ bản tôi đã mô tả mọi thứ, vì vậy đối với khối thứ hai trong ví dụ, tôi sẽ chỉ trình bày các kiểu làm sẵn, để các bạn có thể xem và làm rõ hơn.

Block_shadow:after( nội dung:""; vị trí:tuyệt đối; z-index:-1; top:25px; đáy:25px; left:0; right:0; -webkit-box-shadow:0 0 25px rgba(0, 0,0,0,3); -moz-box-shadow:0 0 25px rgba(0,0,0,0.3); hộp-bóng:0 0 25px rgba(0,0,0,0.3); -radius:10px / 50px; bán kính đường viền:10px / 50px )

Đối với khối trong ví dụ thứ ba, tôi cũng đã mô tả những gì cần phải làm và cũng sẽ chỉ cung cấp mã hoàn chỉnh.

Block_shadow:after( nội dung:""; vị trí:tuyệt đối; z-index:-1; trên cùng:50%; dưới cùng:0; trái:50px; phải:50px; -webkit-box-shadow:0 0 25px rgba(0 ,0,0,0.3); -moz-box-shadow:0 0 25px rgba(0,0,0,0.3); hộp-bóng:0 0 25px rgba(0,0,0,0.3); :200px / 50px; bán kính đường viền:200px / 50px )

Bằng cách thay đổi kiểu, tùy chỉnh chúng cho phù hợp với mình, bạn có thể đạt được các kết quả khác nhau và các hiệu ứng hoàn toàn mới, không chỉ những hiệu ứng mà tôi đã trình bày trong ví dụ. Bằng cách chỉ định giá trị phần trăm, bạn có thể tự động kéo dài bóng tới toàn bộ chiều cao hoặc chiều rộng của khối nếu khối không có kích thước cố định. Hãy thử và cải thiện và trang web của bạn sẽ có giao diện khác thường.

Đó là tất cả, cảm ơn sự quan tâm của bạn. 🙂

Câu hỏi: Hình dạng + góc nhẵn

Tôi sẽ biết ơn bất kỳ sự giúp đỡ nào, đặc biệt là những sự giúp đỡ nhanh chóng.

Trả lời:

tin nhắn từ Trong bóng tối

Spirt Tesla, Cảm ơn phản hồi của bạn, nhưng không có vấn đề gì trong việc xây dựng hình, tôi đã tìm ra rồi, nhưng việc làm mịn các góc đã là một vấn đề - trong mã của bạn, thông số nào chịu trách nhiệm cho việc này. đặc điểm của hình?

Nói chung, bán kính đường viền chịu trách nhiệm khử răng cưa

Câu hỏi: Góc vuông

Giúp tôi tạo các góc vuông,

Đây là mã

/rs- thiết lập lại tài khoản;

/rs Tôi có văn bản này ở đâu trong một khung tròn, nhưng làm cách nào tôi có thể tạo các góc vuông cho khung?

Trả lời:

Giúp tôi tạo góc vuông

Tôi nghĩ rằng ngay cả khi bạn tìm kiếm trên Google trong ba ngày, bạn cũng sẽ không tìm thấy gì. Hãy thử tìm ngược lại, tìm cách tạo các góc tròn, nếu thành công, bạn sẽ học được cách tạo các góc vuông.

Câu hỏi: Cách tạo các góc như vậy cho div

Cảm ơn!

Trả lời: Phần tử giả với kích thước nhất định, chẳng hạn, nhưng sẽ dễ chơi hơn với bóng nếu bạn muốn thực hiện cả 4 góc theo cách này.
bóng hộp: X Y 0 -S #fff; - hai tham số đầu tiên lần lượt là offset theo x và y, độ mờ thứ ba, ở đây nó phải bằng 0 và tham số thứ tư có nhiệm vụ nén bóng khi có dấu trừ (bạn muốn nó trở nên nhỏ). Cái cuối cùng là màu bóng.
Mặc dù, nếu bản thân div của bạn là hình chữ nhật và bóng là hình vuông, thì rõ ràng, sẽ hợp lý khi tạo một phần tử giả trong suốt với các kích thước như bóng và độ lệch theo X và Y để phân tán 4 bóng của nó ở các góc của div. Trong trường hợp này, tham số thứ tư của thuộc tính box-shadow cũng sẽ là 0, chỉ thay đổi hai tham số đầu tiên.

Câu hỏi: (JS) Tìm góc quay thực sự của div

Tôi biết về ma trận (bla-bla) sin và cosin.

Định đề: Trình duyệt “biết” số lần quay của một phần tử nếu góc lớn hơn 360 độ - rõ ràng là từ kinh nghiệm.

Câu hỏi: Có thể trích xuất góc quay thực này được không?

Trả lời: Tôi đã hỏi một câu hỏi cụ thể:
Cách sử dụng tập lệnh để trích xuất toàn bộ giá trị góc xoay của div trong khi trang đang chạy.

390 độ tương tự được chỉ định trong css.

Câu hỏi: chồng một bức tranh lên một bức tranh khác ở một góc nhất định

Trả lời: Tôi đã từng làm như bạn đã chỉ và tôi cũng thấy rằng nó hoạt động tốt, nhưng dù tôi có cố gắng bao nhiêu trên trang web thì cũng không có gì hiệu quả. các góc trên cùng vẫn giữ nguyên, bạn có thể đề xuất điều gì không?

Đã thêm sau 15 phút
cảm ơn, đã tìm ra nó
hình ảnh
{
vị trí: tuyệt đối;
}
đó là vấn đề

Câu hỏi: Plugin Multiscroll, nút mở menu bên trái góc trên cùng chỉ có hình ảnh động trong firefox?

Tại sao nút menu ở góc trên bên trái chỉ có hình động trong Firefox?

Trả lời:

tin nhắn từ Mashka_mulashka

Bạn có thể cho tôi biết tại sao nút menu ở góc trên bên trái chỉ có hình động trong Firefox không?

Có lẽ tôi sẽ cho bạn một gợi ý, nhưng nó cũng hoạt động tốt trong Chrome

Đã thêm sau 7 phút
Nói chung, có vẻ như tên của các khung hình chính được viết ở phía trước và của bạn ở cuối, có lẽ đó là lý do tại sao nó không hoạt động trong IE, nhưng tôi không chắc lắm

Câu hỏi: Xác định góc bằng đường canvas

Trả lời: Bạn có tọa độ chuột không (đây là các cạnh của một tam giác vuông)
Tất cả những gì còn lại là tìm ra cách tìm một góc khi biết chiều dài của hai chân
và tang được dùng để làm gì trong lượng giác?

Có ý kiến ​​​​cho rằng bạn thật ngu ngốc và giải quyết sai vấn đề mà bạn đang gặp phải. họ đã nói với bạn về vector rồi

Câu hỏi: Các góc được bo tròn trên khối cha và định vị phần tử con

Tại sao điều này có thể xảy ra?
2. Khối màu be nằm trên khối màu xanh lá cây, chúng phải nằm cạnh nhau và phải có đường viền giữa chúng. Đây là mã:

Trả lời: Cảm ơn. Đã tìm ra lỗi lầm của tôi

Đã thêm sau 25 phút
Quả thực sai lầm là tôi đã đặt các góc cho tròn phần tử cha. Nhưng cuối cùng tôi quyết định từ bỏ chúng.
Tôi không tách các khối, tôi thêm một class.right mới cho toàn bộ phần bên phải của nội dung và đánh dấu nó bằng màu trắng. Do đó, nhìn bề ngoài có vẻ như có 2 khối và chúng tách biệt nhau

Câu hỏi: Bật thanh trượt hình ảnh JavaScript thuần túy

Trả lời: Deimon26, nhìn vào đây, mọi thứ đều ở dạng js thuần túy, có bình luận

cong Bóng tối hoặc Bóng tối mô phỏng các góc cong hướng lên trên,Đồng thời, các đối tượng hoặc hình ảnh nổi bật so với văn bản thuần túy.
Và như vậy hiệu ứng ba chiều, chỉ có thể đạt được bằng cách sử dụng CSS3 Và HTML.

Đầu tiên, một số khái niệm cơ bản chung nhưng quan trọng để tạo bóng cong hoặc lõm.

Chặn bằng bóng tối

Bằng cách sử dụng CSS3 bóng của bất kỳ vật thể nào có thể được tạo ra HTML, với bất kỳ hướng, kích thước và độ mờ nào. Đối với điều này nó được sử dụng, CSS3 tham số “bóng hộp: 2px 2px 2px 2px #000 inet”. Điều quan trọng cần biết là bóng thích ứng với kích thước và hình dạng của vật thể. Góc tròn vật thể tạo ra một bóng tròn.
Đối với một đối tượng, có thể chỉ định đồng thời nhiều bóng khác nhau, phân tách bằng dấu phẩy.

Ý nghĩa của thông tin" box-shadow: 2px 2px 2px 2px #000 inset“:

• Giá trị đầu tiên chuyển vị theo phương ngang.
  Giá trị cao hơn sẽ di chuyển bóng sang phải nhiều hơn, trong khi giá trị âm sẽ di chuyển bóng sang trái.
• Giá trị thứ hai là chuyển vị theo phương thẳng đứng.
  Với các giá trị dương, bóng sẽ di chuyển xuống và với các giá trị âm, bóng sẽ di chuyển lên.
• Giá trị thứ ba xác định mức độ bóng mờ.
  Giá trị càng cao thì độ mờ càng lớn.
• thứ tư tham số bổ sungđịnh nghĩa bán kính bóng tối.
  Giá trị càng cao, bóng càng lớn.
• Sau đó theo sau màu bóng.
  Dữ liệu này cũng ảnh hưởng đến nhận thức về độ mờ.
• “chèn vào“: Thông tin tùy chọn này là bóng tối bên trong

Ký hiệu màu này “# 000”, có thể được thay thế bởi “RGBA” (kênh đỏ, lục, lam, alpha), Ví dụ, “bóng hộp: 4px 4px 4px rgba(0, 0, 0, .6)”, làm cho bóng của đối tượng trở nên mờ và do đó trông tự nhiên hơn trên nền có kết cấu.

Bóng cong và cong

đánh dấu cơ bản HTML không thay đổi trong tất cả các ví dụ sau. Vì vậy, chỉ những gì cần thiết sẽ được thêm vào CSS3. Thay vì một hình ảnh, một giây “ phân chia-container” cho văn bản, nhưng cuối cùng thì nó cũng giống nhau.

Để xác định vị trí của bóng, vùng chứa “ DIV” phải có tham số “vị trí: tương đối” và với sự giúp đỡ “chỉ số z: 1” di chuyển đến tiền cảnh. Do đó, vùng chứa này đóng vai trò là điểm tham chiếu cho bóng được định vị tuyệt đối.

#schatten (vị trí: tương đối; chiều cao: 34,4em; chiều rộng: 50em; lề: -2,5em tự động 1,8em; trái: -5px; z-index: 1; )

Bây giờ thuộc tính của vùng chứa thứ hai “ DIV” hoặc thuộc tính hình ảnh.
Kích thước cả chiều rộng và chiều cao bằng 100% vùng chứa chính “#schatten”, và cũng có khung màu trắng "ranh giới" 5 pixel.
Để làm cho khung màu trắng khác với hình nền, một cái bóng khác sẽ được thêm vào. Điều này dẫn đến việc tách chủ thể khỏi nền nhiều hơn, nhờ đó nâng cao hiệu ứng 3D.

#schatten img ( vị trí: tương đối; chiều rộng: 100%; chiều cao: 100%; đường viền: 5px Solid #fff; box-shadow: 0 -3px 5px -2px rgba(0, 0, 0, .6), 0 1px 4px rgba(0, 0, 0, .3), 0 0 20px rgba(0, 0, 0, .1) chèn )

Nhờ các yếu tố giả ":trước" Và ":sau đó" một bóng cong được xác định và thêm vào vùng chứa “ DIV“.class=”notranslate”> Các phần tử ":trước" Và ":sau đó", thường được hiểu là các đối tượng có sẵn và được đặt trên HTML nói cách khác, phần tử được đặt trước hoặc sau phần tử Nhờ “. vị trí: tuyệt đối“, bóng độc lập với vật thật và có thể được định vị riêng lẻ.

Đầu tiên, kích thước của bóng được xác định và do đó thu được bằng cách sử dụng hai phần tử giả, hai hình chữ nhật có chiều rộng 50% và chiều cao 30% của vùng chứa chính “# làm phiền“. Sau đó, chúng tôi di chuyển hai hình chữ nhật thêm 2 pixel và tạo bóng ở khoảng cách 15 pixel và độ mờ 10 pixel.
Phần tử giả ":trước" nhằm mục đích thể hiện cái bóng ở phía dưới bên trái và do đó nhận được góc quay 3° ngược chiều kim đồng hồ. Phía sau bên phải phần tử phản hồi ":sau đó".

#schatten:trước, #schatten:sau ( vị trí: tuyệt đối; nội dung: ""; chiều rộng: 50%; chiều cao: 30%; đáy: 2px; bên trái: 10px; bóng hộp: 0 15px 10px rgba(0, 0, 0, .7); biến đổi: xoay(-3deg); z-index: -2; ) #schatten:after ( phải: 0; trái: tự động; biến đổi: xoay (3deg); )

Bây giờ chúng ta hãy xem các ví dụ khác về bóng hình vòm và bóng cong.
Và, như đã mô tả ở trên, chúng tôi sẽ chèn một vùng chứa bổ sung “ DIV” thay vì một hình ảnh.

Mã chính CSS3 cho tất cả các ví dụ tiếp theo:

Box ( vị trí: tương đối; chiều cao: 12em; chiều rộng: 31em; lề: 0 tự động; chỉ mục z: 1; ) .schatten ( vị trí: tương đối; màu: #777; chiều rộng: 80%; chiều cao: 80%; nền: #fff; bóng hộp: 0 1px 4px rgba(0, 0, 0, .3), 0 0 40px rgba(0, 0, 0, .1) inet) .schatten:trước ( vị trí: tuyệt đối; nội dung: " "; chỉ mục z: -2; bóng hộp: 0 0 15px rgba(0, 0, 0, .6); bán kính đường viền: 100px / 20px;

Bóng cong theo chiều ngang

Bóng cong theo chiều dọc

Góc cong

Bóng tối trong phối cảnh

bóng treo

Bóng nổi lên

Thuộc tính box-shadow thêm một hoặc nhiều bóng vào một phần tử. Bóng là bản sao của phần tử được bù theo khoảng cách đã chỉ định. Bóng có thể ở bên ngoài hoặc bên trong, mờ hoặc phẳng và có thể đi theo đường viền của các khối với các góc tròn. Bằng cách sử dụng từ khóa hình nhỏ tạo bóng bên trong phần tử, làm cho phần tử trở nên đồ sộ hoặc bị lõm xuống về mặt thị giác.

Cách tạo bóng hộp bằng thuộc tính box-shadow

Hỗ trợ trình duyệt

I E: 9.0
Bờ rìa: 12.0
Firefox: 4.0, 3.5 -moz-
Trình duyệt Chrome: 10.0, 4.0 -webkit-
Cuộc đi săn: 5.1, 3.1 -webkit-
Opera: 11.5
Safari của iOS: 5.1, 3.1 -webkit-
Trình duyệt Android: 4.0, 2.1 -webkit-

1. Cú pháp thuộc tính box-shadow

Mỗi bóng có từ một đến năm tham số: độ lệch ngang, độ lệch dọc, bán kính mờ (tùy chọn), bán kính trải rộng (tùy chọn) và màu bóng. Bóng không ảnh hưởng đến bố cục và có thể chồng lên các phần tử liền kề hoặc bóng của chúng. Tài sản không được thừa kế.

2. Ví dụ về bóng khối

2.1. Bóng bên trong

2.2. Bóng phẳng ở một bên

phẳng

phẳng

TRONG bài học này chúng ta sẽ tạo hiệu ứng các góc cong mà không cần sử dụng hình ảnh hoặc dấu hiệu bổ sung. Nó hoạt động tốt trong tất cả các trình duyệt hiện đại và rất phù hợp cho các thiết kế trang web với cách phối màu đơn giản.

Hiệu ứng này đã được sử dụng trong bản demo của bài học "Nhiều nền và nét bằng CSS2". Ngoài ra, có thể thấy việc sử dụng các góc cong trong thiết kế của một trang web thực tế trong ví dụ của Yiibu. Nhưng trang Yiibu sử dụng hình ảnh và chúng tôi sử dụng các phần tử giả và CSS.

Bắt đầu

Không có gì phức tạp. Bất cứ ai cũng sẽ làm phần tử và không cần đánh dấu bổ sung. Tất cả bắt đầu với một hình chữ nhật được sơn đơn giản. Các trình duyệt không hỗ trợ phần tử giả (IE6 và IE7) cũng sẽ xuất ra nó.

Việc thêm thuộc tính vị trí: tương đối làm cho điều đó trở nên khả thi định vị tuyệt đối các phần tử giả.

Lưu ý ( vị trí: tương đối; chiều rộng: 30%; phần đệm: 1em 1,5em; lề: 2em tự động; color:#fff; nền:#97C02F; )

Góc gấp được tạo bằng cách sử dụng phần tử giả được đặt ở góc trên cùng của hình chữ nhật. Phần tử giả không có chiều rộng hoặc chiều cao nhưng có nét dày. Bằng cách thay đổi độ dày của nét, chúng ta sẽ thay đổi được kích thước của góc gấp.

TRONG trong ví dụ này Phần trên và bên phải của nét có màu phù hợp với màu nền của hình chữ nhật gốc. Phần bên trái và phần dưới của nét vẽ có màu đậm hơn hoặc nhạt hơn màu nền của hình chữ nhật.

Lưu ý:trước (nội dung:""; vị trí:tuyệt đối; top:0; right:0; border-width:0 16px 16px 0; border-style:solid; border-color:#658E15 #fff; )

Đó là tất cả những gì bạn cần để tạo hiệu ứng đơn giản góc gấp, tương tự như góc được sử dụng trên trang Yiibu.

Firefox 3.0 không cho phép định vị các phần tử giả. Bạn có thể sử dụng một vài thuộc tính để sửa lỗi này trong trình duyệt này.

Lưu ý: trước ( ... display:block; width:0; )

Thêm bóng sáng

Hình thức của góc có thể được cải thiện một chút bằng cách thêm thuộc tính box-shadow (đối với những trình duyệt hỗ trợ nó) vào phần tử giả. Việc đặt thuộc tính tràn: ẩn trên lớp phần tử sẽ ẩn một phần bóng, điều này sẽ phá vỡ hiệu ứng cuộn tròn.

Lưu ý: trước ( ... -webkit-box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2); -moz-box-shadow: 0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2); box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0,2);

Các góc tròn

Việc sử dụng kỹ thuật này kết hợp với các góc tròn cũng tương đối dễ dàng. Thật không may, mọi người trình duyệt hiện đại có một số loại lỗi liên quan đến thuộc tính bán kính đường viền (bao gồm cả những lỗi sử dụng thuộc tính không có tiền tố). Tình trạng này đồng nghĩa với việc cần phải làm thêm việc.

Chỉ có trình duyệt Webkit mới có thể làm được góc trònđối với các phần tử giả nếu chúng chỉ có 2 phần nét. Opera 11 và Firefox 3.6 tạo ra một mớ hỗn độn đáng kinh ngạc. Hơn nữa, Opera 11 có lỗi tối đa trong quá trình này.

Sử dụng cả bốn mặt sẽ loại bỏ các vấn đề trong Opera 11 và Firefox 3.6. Nhưng phương pháp này giải pháp dẫn đến lỗi trong Safari 5 dẫn đến đường chéo lởm chởm. Đường vòng vấn đề này Bạn có thể đặt màu cho ít nhất một phần của nét vẽ thành trong suốt.

Màu nền sẽ được hiển thị thông qua đường viền trong suốt. Lý tưởng nhất là cách tiếp cận này sẽ tạo ra hiệu ứng và chứa tối thiểu mã. Nhưng Opera 11 cho thấy màu nền chỉ thông qua một nét trong suốt nếu thuộc tính bán kính đường viền được đặt.

Làm tròn ghi chú:trước ( nội dung:""; vị trí: tuyệt đối; top:0; right:0; border-width:8px; border-color:#fff #fff trong suốt trong suốt; nền:#658E15; -webkit-border- bán kính dưới cùng bên trái: 5px; -moz-bán kính đường viền:0 0 0 5px; bán kính đường viền:0 0 0 5px chiều rộng: 0;

Tệp CSS cho trang demo chứa các nhận xét hữu ích để làm việc. Mỗi trình duyệt có những đặc điểm riêng khi sử dụng thuộc tính bán kính đường viền hoặc các phần tử viền không có chiều rộng hoặc chiều cao.

Mã cuối cùng

Dưới đây là tất cả mã CSS cần thiết để tạo hiệu ứng góc cong với bóng tinh tế chỉ bằng một phần tử HTML.

Chức vụ: tương đối; chiều rộng: 30%; phần đệm:1em 1,5em; lề:2em tự động; màu sắc:#fff; nền:#97C02F; tràn:ẩn; ) .note:trước ( nội dung:""; vị trí:tuyệt đối; top:0; phải:0; chiều rộng đường viền:0 16px 16px 0; border-style:solid; border-color:#fff #fff #658E15 #658E15 ; nền:#658E15; -webkit-box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2); 0,0.3), -1px 1px 1px rgba(0,0,0,0.2); bóng hộp:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0, 0.2); display:block; width:0; /* Khắc phục các hạn chế của Firefox 3.0 */ .note.rounded ( -webkit-border-radius:5px; -moz-border-radius:5px ; border-radius:5px; ). note.rounded:trước ( border-width:8px; border-color:#fff #fff trong suốt trong suốt; -webkit-border-bottom-left-radius:5px; -moz-border-bán kính:0 0 0 5px; viền- bán kính:0 0 0 5px )

Phần kết luận

Trang demo chứa các ví dụ sử dụng màu sắc khác nhauđể đảm bảo hiệu ứng dễ sử dụng.

Cần phải tính đến điều đó kỹ thuật này hoạt động kém hơn khi sử dụng hình ảnh làm nền cho một phần tử so với khi sử dụng một màu đơn giản. Nhưng các phương pháp tổ chức góc cong khác cũng có những hạn chế như vậy.