Blog

Trong khuôn khổ bài viết này, mình sẽ đề cập đến những vấn đề cơ bản của CSS3. Mình viết dựa theo trang w3schools.com, do trang sử dụng tiếng anh nên nhiều bạn gặp trở ngại trong việc học.

Một điều nữa. Bạn không nên copy và paste code, mà hãy tự viết code. Cách học lập trình tốt nhất là viết code chứ không phải copy rồi paste.

Để có thể thiết kế một trang web có chất lượng đòi hỏi bạn phải cố gắng rất nhiều. Chăm chỉ, sáng tạo trong quá trình học sẽ chó bạn kết quả rất tốt. Chúc bạn học tập vui vẻ.

Giới thiệu về CSS3

CSS3 đã được chia thành các “modules”, nó chứa các đặc điểm kỹ thuật của CSS. Và thêm vào những modules mới.

Một vài module quan trọng như:

  • Selectors
  • Box Model
  • Backgrounds và Boders
  • Image Values và Replaced Content
  • Text Effects
  • 2D/3D Transformations
  • Animations
  • Multiple Column Layout
  • User Interface

CSS3 Rounded Corners

Với thuộc tính border-radius, bạn có thể thêm một số phần tử cho “rounded corners”

Thuộc tính border-radius giúp bạn định kiểu góc cho hộp của bạn.

Viết lại ví dụ dưới để xem chi tiết:

<!DOCTYPE html>
<html>
<head>
  <style type="text/css">
    #rcorners1 {
    border-radius: 25px;
    background: blue;
    padding: 20px; 
    width: 200px;
    height: 50px;    	
  }

    #rcorners2 {
    border-radius: 25px;
    border: 2px solid yellow;
    padding: 20px; 
    width: 200px;
    height: 50px;    
  }	

    #rcorners3 {
    border-radius: 25px;
    background: url(border.jpg);
    background-position: left top;
    background-repeat: repeat;
    padding: 20px; 
    width: 200px;
    height: 200px;    
  }
  </style>
</head>
<body>
  <p>Thuộc tính border-radius cho phép bạn định kiểu cho đường viền góc.</p>
  <p>Kiểu 1:</p>
  <p id="rcorners1"></p>
  <p>Kiểu 2:</p>
  <p id="rcorners2"></p>
  <p>Kiểu 3:</p>
  <p id="rcorners3"></p>
</body>
</html>

Chú ý: Ở id rcorners3, thuộc tính background: url(border.jpg). Bạn phải đặt ảnh trong cùng thư mục của file html

Hãy thêm hoặc thay đổi giá trị của border-radius rồi xem kết quả. Ví dụ như: border-radius: 15px 50px 30px 5px; hay border-radius: 20px 30px;

Thử đổi màu nền hoặc đổi màu cho đường viên theo ý bạn. Lưu ý là không copy paste nha!!

Bạn cũng có thể tạo các hộp hình elip. Xem ví dụ sau:

<!DOCTYPE html>
<html>
<head>
  <style type="text/css"> 
    #rcorners4 {
        border-radius: 50px/25px;
        background: blue;
        padding: 20px; 
        width: 200px;
        height: 150px; 
    }

    #rcorners5 {
        border-radius: 25px/50px;
        background: blue;
        padding: 20px; 
        width: 200px;
        height: 150px; 
    }

    #rcorners6 {
        border-radius: 50%;
        background: blue;
        padding: 20px; 
        width: 200px;
        height: 150px;
    } 
  </style>
</head>
<body>

  <p>border-radius: 50px/25px:</p>
  <p id="rcorners4"></p>

  <p>border-radius: 25px/50px:</p>
  <p id="rcorners5"></p>

  <p>border-radius: 50%:</p>
  <p id="rcorners6"></p>

</body>
</html>

Thêm về border-radius:

border-radius Định kiểu các góc cho hộp
border-top-left-radius Định kiểu góc trên bên
border-top-right-radius Định kiểu góc trên bên phải
border-bottom-left-radius Định kiểu góc dưới bên trái
border-bottom-right-radius Định kiểu góc dưới bên phải

Border Images

Với thuộc tính border-image, bạn có thể tạo đường viền cho hộp bằng hình ảnh,

3 lưu ý khi dùng border-image:

  • HÌnh ảnh để sử dụng.
  • Nơi để cắt hình ảnh.
  • Xác định kiểu.

Trong những ví dụ dưới đây, tôi sử dụng ảnh sau.(border.png)

vv

Một vài ví dụ về cách sử dụng border-image.

Vi dụ 1:

<!DOCTYPE html>
<html>
<head>
  <style type="text/css"> 
  #borderimg { 
    border: 20px solid transparent;
    padding: 20px;
    border-image: url(border.png) 30 round;
  }
  </style>
</head>
<body>
  <p></p>
  <p id="borderimg">Noi dung o day.</p>
</body>
</html>

Ví dụ 2:

<!DOCTYPE html>
<html>
<head>
  <style type="text/css"> 
  #borderimg { 
    border: 20px solid transparent;
    padding: 20px;
    border-image: url(border.png) 30 stretch;
  }
  </style>
</head>
<body>
  <p></p>
  <p id="borderimg">Noi dung o day.</p>
</body>
</html>

Hãy thử thay đổi các giá trị của border-image, sẽ có những điều kì diệu xảy ra.

xem bảng dưới đây:

Thuộc tính Mô tả
border-image Tạo đường viền cho hộp bàng hình ảnh.
border-image-source Chỉ định đường dẫn đến hình ảnh được sử dụng như một đường viền.
border-image-slice Chỉ định kiểu cắt hình ảnh
border-image-width Chỉ định độ rộng cho đường viền.
border-image-outset Xác định số các hình ảnh khu vực đường viền mở rộng vượt ra ngoài đường viền hộp
border-image-repeat  Xác định xem các hình ảnh biên giới nên được lặp đi lặp lại, tròn hoặc kéo dài

Trên đây là toàn bộ kiến thức CSS3 về Border. Thiết kế Website OTVINA hẹn gặp lại các bạn ở bài viết CSS3 với Background và Color.

Thanks you for reading!!