Các code đường viền cơ bản.

Bài tut này sẽ giải đáp thắc mắc cho tất cả những bạn muốn biết Sera đã làm cái widget Quy định comment hay Tin nhắn từ Sera như thế nào hunhun
Rainbow Heart [Free to use] by Milkate Trước khi đi vào hướng dẫn cụ thể thì Sera cũng xin nói trước với các bạn là mình hoàn toàn không phải là dân chuyên về công nghệ thông tin hay viết code gì cả, mình chỉ tự mò mẫm và hiểu theo ý của mình, vì vậy những từ mình dùng trong bài viết có thể không chính xác với từ ngữ, thuật ngữ trong chuyên ngành công nghệ thông tin hoặc code của mình có thể thừa hoặc chưa chặt chẽ. Thế nên nếu có chỗ nào sai sót thì mong các bạn góp ý chứ đừng gạch đá mình nhé  Và hãy chuẩn bị tinh thần đi, bài này rất là dài đấy nhé 
Bài tut này sẽ gồm 4 phần:
  1. Các code đường viền cơ bản.
  2. Kết hợp code đường viền và cách tạo lớp nền mờ (opacity) phủ lên hình nền.
  3. Giải thích ngắn gọn về một số thuộc tính có trong code.
  4. Một số code khung viền mẫu.
 Trước khi đi vào chi tiết thì có 1 lưu ý (hơi thừa) với các bạn là phải dán code vào chế độ Văn bản (hay có mấy tên khác là chế độ Texthoặc chế độ HTML) của khung soạn thảo nhé cuoinherang Cho những bạn chưa biết thì nếu các bạn muốn dán code vào thanh bên thì widget cần sử dụng ở đây là widget Văn bản nhé cuoinherang
Giờ thì chính thức bắt đầu nào colen
1. Các code đường viền cơ bản
 Trong phần này Sera sẽ giới thiệu đến các bạn 8 code đường viền cơ bản:
Dạng nét liền (solid)
<div style="padding: 8px; border: 2px solid #FF1493; word-wrap: break-word;">CHÈN NỘI DUNG VÀO ĐÂY</div>
Dạng dấu chấm (dotted)
<div style="padding: 8px; border: 2px dotted #FF69B4; word-wrap: break-word;">CHÈN NỘI DUNG VÀO ĐÂY</div>
Dạng nét đứt (dashed)
<div style="padding: 8px; border: 2px dashed #FF4500; word-wrap: break-word;">CHÈN NỘI DUNG VÀO ĐÂY</div>
Dạng nét đôi (double)
<div style="padding: 8px; border: 6px double #8A2BE2; word-wrap: break-word;">CHÈN NỘI DUNG VÀO ĐÂY</div>
Dạng đường rãnh (groove)
<div style="padding: 8px; border: 10px groove salmon; word-wrap: break-word;">CHÈN NỘI DUNG VÀO ĐÂY</div>
Dạng chóp (ridge)
<div style="padding: 8px; border: 10px ridge salmon; word-wrap: break-word;">CHÈN NỘI DUNG VÀO ĐÂY</div>
Dạng đổ bóng bên trong (inset)
<div style="padding: 8px; border: 10px inset #8FBC8F; word-wrap: break-word;">CHÈN NỘI DUNG VÀO ĐÂY</div>
Dạng đổ bóng bên ngoài (outset)
<div style="padding: 8px; border: 10px outset #8FBC8F; word-wrap: break-word;">CHÈN NỘI DUNG VÀO ĐÂY</div>
 Ngoài ra các bạn cũng có thể kết hợp các code đường viền ở trên thành những dạng đường viền hỗn hợp, ví dụ như thế này nè:
Cái khung này được Sera kết hợp từ 3 loại đường viền: outset, groove và inset
 Hay cái này:
Cái khung này được Sera kết hợp từ 4 loại đường viền: solid, dashed, dotted và double
 Hoặc có thể thêm thuộc tính border-radius để bo tròn 4 góc, ví dụ như thế này:
<div style="border-radius: 25px; padding: 8px; border: 2px solid#FF1493; word-wrap: break-word;">CHÈN NỘI DUNG VÀO ĐÂY</div>
 Nếu nội dung trong khung quá dài, các bạn có thể dùng thuộc tính overflow kết hợp với max-height (hoặc height) để thu gọn lại (và sẽ xuất hiện thanh cuộn), ví dụ:
Code:
<div style="max-height: 150pxoverflow: auto; padding: 8px; border: 2px solid #FF1493; word-wrap: break-word;">Bọn chúng hí hửng, hí hửng nhưng rồi hơi bực vì cả đêm chưa có chuyện gì xảy ra. Chỉ có muỗi đến gặm chúng tơi bời. Bọn muỗi trên đài ngắm sao, không thích lại gần Vạn Độc Vương đầy độc và Đông Tử nói chuyện rất sinh động tay chân, nên giữa tấn công một người hay động đậy và tấn công hai tên dị quái ngồi im như bữa ăn dọn sẵn thì bọn muỗi chọn cái thứ hai rồi. Hai dị quái cắn răng chịu cắn, đến gần sáng, mới thấy hai con người hay giả vờ kia xích lại nhau chút. Bọn chúng mở cờ trong bụng, cuối cùng thì công trình kiên nhẫn nhiều chuyện cũng được đền đáp. Vậy mà Tường Vy lại đùng đùng xuất hiện.</div>
 Kết quả:
Bọn chúng hí hửng, hí hửng nhưng rồi hơi bực vì cả đêm chưa có chuyện gì xảy ra. Chỉ có muỗi đến gặm chúng tơi bời. Bọn muỗi trên đài ngắm sao, không thích lại gần Vạn Độc Vương đầy độc và Đông Tử nói chuyện rất sinh động tay chân, nên giữa tấn công một người hay động đậy và tấn công hai tên dị quái ngồi im như bữa ăn dọn sẵn thì bọn muỗi chọn cái thứ hai rồi. Hai dị quái cắn răng chịu cắn, đến gần sáng, mới thấy hai con người hay giả vờ kia xích lại nhau chút. Bọn chúng mở cờ trong bụng, cuối cùng thì công trình kiên nhẫn nhiều chuyện cũng được đền đáp. Vậy mà Tường Vy lại đùng đùng xuất hiện.
 Chú ý chung:
 Phần chữ màu đỏ là độ dày của đường viền
 Phần chữ màu xanh lá là loại đường viền (solid, dotted, dashed,…)
 Phần chữ màu hồng là màu đường viền, có thể sử dụng tên gọi của màu (red, black,…), mã màu hex (#ffffff, #ff0000,…) hoặc các loại mã màu khác để thay màu cho đường viền. Về phần mã màu hex thì các bạn có thể xem và lấy mã màu ở ĐÂY nhé 
 Ba thành phần này có thể đổi chỗ cho nhau, kết quả đều không thay đổi.
 Có thể sử dụng các thẻ <div>, <p>, <span> tuỳ trường hợp, không nhất thiết phải dùng thẻ <div> như trong code mẫu.

 MỌI THÔNG TIN VUI LÒNG LIÊN HỆ NGAY VỚI CHÚNG TÔI :   

TRUNG TÂM THIẾT KẾ WEBSITE  -  WEB DẠNG BLOG -  ZÁRẺ 
Phụ trách thiết kế : Mr.Mika 
Call me : 0919.08.3000 - 0927.927.000 - Email :  Lienhe365@gmail.com 
Phụ trách kỹ thuật và kinh doanh : Mr. Sơn
Call me : 0919.083.000 - 0927.927.000   Email :   Setup247@Gmail.Com 
Hỗ trợ ZALO 24/24 :   Nhập số 0927.927.000 và zalo kết bạn và liên hệ nhé!

GIỚI THIỆU ĐẾN QUÝ KHÁCH MỘT SỐ DỰ ÁN SẼ THỰC HIỆN TRONG NĂM 2018


DANH MỤC BÀI ĐĂNG - KHÁCH MUỐN XEM NỘI DUNG GÌ LICK VÀO TIÊU ĐỀ ẤY


WEBSITEMIKA - THƯƠNG HIỆU UY TÍN BỞI HƠN 300 DOANH NGHIỆP VÀ CÁC THƯƠNG HIỆU VỪA VÀ NHỎ LỰA CHỌN
Điểm giao dịch: Online 24h
-Email: Setup247@gmail.com - Website: https://thietkeweb.mikalaza.com