CSS Border : Những điều không nên bỏ qua

Chúng ta đã quá quen thuộc với thuộc tính border có trong CSS, tuy nhiên còn có những điều thú vị khác về nó sẽ khiến bạn thật sự ngạc nhiên. Nào chúng ta cùng tìm hiểu nhé :

Thông thường chúng ta sẽ viết như thế này khi cần tạo đường viền cho đối tượng:

border: 1px solid black;

Đoạn css trên sẽ cho chúng ta một đường viền (border) với kích thước là 1px, ngoài ra các bạn còn có thể tùy chỉnh độ dày mỏng của đường viền như sau :

border-awidth: thick;
border-style: solid;
border-color: black;

Bằng cách chỉ định giá trị border-awidth , chúng ta sẽ có những đường viền với độ dày mỏng khác nhau như bên dưới:

Ngoài ra các bạn còn có thể thay đổi đường màu sắc của đường viền cũng như thêm hiệu ứng hover cho đẹp mắt :

.box {
    border: 1px solid red;
}

.box:hover {
    border: 1px solid green;
}

Hoặc bạn có thể chỉ định riêng 1 giá trị như sau :

.box {
    border: 1px solid red;
}

.box:hover {
    border-color: green;
}

Border-Radius

border-radius  là một cải tiến có trong CSS3, với thuộc tính này, chúng ta sẽ dễ dàng bo tròn đường viền góc của đối tượng . Để có thể chạy tốt trên mọi trình duyệt, các bạn cần phải khai báo đầy đủ như sau :

-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;

Các bạn cùng tham khảo một số ví dụ mà border-radius có thể làm được với những giá trị khác nhau :

Không chỉ có thể, các bạn còn có thể tùy chỉnh thông số cho từng góc như sau :

border-top-left-radius: 20px;
border-top-right-radius: 0;
border-bottom-right-radius: 30px;
border-bottom-left-radius: 0;

Trong đoạn code trên, chúng ta ấn định giá trị border-top-right-radius và border-bottom-left-radius là 0 thì hiệu ứng bo tròn sẽ không xuất hiện tương ứng với vị trí đó.

Ngoài ra các bạn còn có thể viết lại thành 1 dòng cho dễ đọc như thế này :

/* top left, top right, bottom right, bottom left */
border-radius: 20px 0 30px 0;

Dựa vào border-radius mà chúng ta còn có thể tạo ra những đối tượng với những hình dạng rất gần với thực tế, ví dụ như vẽ một trái chanh như thế này :

.lemon {
   awidth: 200px; height: 200px;

   background: #F5F240;
   border: 1px solid #F0D900;
   border-radius: 10px 150px 30px 150px;
}

Border-Style

Trong khi các giá trị solid, dashed, dotted thường được sử dụng nhất thì thuộc tính border-style còn cung cấp các giá trị như là groove và ridge

border: 20px groove #e3e3e3;

Outline

Kỹ thuật tạo 2 đường viền phổ biến nhất chính là tận dụng thuộc tính outline.

.box {
   border: 5px solid #292929;
   outline: 5px solid #e3e3e3;
}

Pseudo Elements

Trong khi outline chỉ cho phép chúng ta tạo được tối đa là 2 đường viền cùng một lúc, thì có một cách khác để chúng ta có thể tạo thêm nhiều đường viền nữa. Đó là tận dụng :before và :after

.box {
  awidth: 200px; height: 200px;
  background: #e3e3e3;
  position: relative;

  border: 10px solid green;
}

/* Create two boxes with the same awidth of the container */
.box:after, .box:before {
  content: ';
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}

.box:after {
  border: 5px solid red;
  outline: 5px solid yellow;
}

.box:before {
  border: 10px solid blue;
}

Box-Shadow

Nếu bằng đó đường viền vẫn chưa làm bạn hài lòng, thì các bạn có thể tận dụng tham số spread trong thuộc tính box-shadow có trong CSS3.

.box {
    border: 5px solid red;
     box-shadow:
       0 0 0 5px green,
       0 0 0 10px yellow,
       0 0 0 15px orange;
}

Tạo Độ Nghiêng

border-radius không những chỉ tiếp nhận 1 giá trị , mà nó còn có thể tiếp nhận cùng 1 lúc 2 giá trị tương ứng với các giá trị chiều ngang (horizontal) và chiều dọc (vertical), chính vì thế mà chúng ta có thể tạo độ nghiêng cho đối tượng nhờ tận dụng kỹ thuật này.

.box {
    awidth: 200px; height: 200px;
    background: #666;

    border-top-left-radius: 15em 1em;
    border-bottom-right-radius: 15em 1em;

}

CSS Shapes

Các bạn có biết rằng, nếu để đối tượng có awidth và height bằng 0 thì khi áp dụng thuộc tính border, chúng ta có thể tạo ra được những hình dạng nhất định không ? Để hiểu rõ chúng ta cùng xem ví dụ sau :

.arrow {
  awidth: 0; height: 0;

  border: 100px solid;
  border-top-color: red;
  border-right-color: green;
  border-bottom-color: blue;
  border-left-color: yellow;
}

Đoạn css trên sẽ cho chúng ta một đối tượng có hình dạng như thế này :

Nếu chúng ta để trống màu các vị trí khác mà chỉ để lại một vị trí như sau :

.arrow {
  awidth: 0; height: 0;

  border: 100px solid;
  border-bottom-color: blue;
}

Thì chúng ta sẽ có được hình như sau :

Khà khà, đến đây bắt đầu hấp dẫn rồi, chúng ta sẽ thử tạo một hình bằng kỹ thuật này xem sao nhé .

Bước 1 : Đầu tiên chúng ta sẽ tạo 1 đoạn html :

</pre>
<div class="speech-bubble">Hi there!</div>
<pre>

Kế tiếp chúng ta sẽ định dạng bằng css như sau :

.speech-bubble {
    position: relative;
    background-color: #292929;

    awidth: 200px;
    height: 150px;
    line-height: 150px; /* vertically center */

    color: white;
    text-align: center;
}

Chúng ta sẽ được như thế này :

Bước 2 : Sử dụng after psuedo-element

.speech-bubble:after {
  content: ';
  position: absolute;

  awidth: 0;
  height: 0;

  border: 10px solid;
  border-color: red green blue yellow;
}

Kế tiếp chúng ta sẽ chỉ giứ lại một hình tam giác :

.speech-bubble:after {
  content: ';
  position: absolute;

  awidth: 0;
  height: 0;

  border: 10px solid;
  border-top-color: red;
}

Rồi sau đó đưa nó ra ngoài :

.speech-bubble:after {
  content: ';
  position: absolute;

  awidth: 0;
  height: 0;

  border: 15px solid;
  border-top-color: red;

  top: 100%;
  left: 50%;
}

Việc cuối cùng là bo tròn khung và thay đổi màu mũi tên là xong.

.speech-bubble {
   /* … other styles */
   border-radius: 10px;
}

.speech-bubble:after {
  content: ';
  position: absolute;

  awidth: 0;
  height: 0;

  border: 15px solid;
  border-top-color: #292929;

  top: 100%;
  left: 50%;
  margin-left: -15px; /* adjust for border awidth */

Các bạn còn có thể cho mũi tên xuất hiện ở những vị trí khác nhau như sau :

.speech-bubble {
  position: relative;
  background-color: #292929;

  awidth: 200px;
  height: 150px;
  line-height: 150px; /* vertically center */

  color: white;
  text-align: center;
  border-radius: 10px;

  font-family: sans-serif;
}

.speech-bubble:after {
  content: ';
  position: absolute;

  awidth: 0;
  height: 0;

  border: 15px solid;
}
/* Position the Arrow */

.speech-bubble-top:after {
  border-bottom-color: #292929;

  left: 50%;
  bottom: 100%;
  margin-left: -15px;
}
.speech-bubble-right:after {
  border-left-color: #292929;

  left: 100%;
  top: 50%;
  margin-top: -15px;
}

.speech-bubble-bottom:after {
  border-top-color: #292929;

  top: 100%;
  left: 50%;
  margin-left: -15px;
}

.speech-bubble-left:after {
  border-right-color: #292929;

  top: 50%;
  right: 100%;
  margin-top: -15px;
}

Để lời thoại được canh giữa tốt hơn, chúng ta sẽ sửa lại một chút như sau :

Phần html

</pre>
<div class="speech-bubble speech-bubble-top">
Text goes here.</div>
<pre>

và Phần css

.speech-bubble {
 /* other styles */

  display: table;
}

.speech-bubble p {
  display: table-cell;
  vertical-align: middle;
}

với thuộc tính border các bạn có thể vẽ được rất nhiều hình, kể cả hình như thế này :

.biohazard {
  awidth: 0; height: 0;

  border: 60px solid;
  border-radius: 50%;

  border-top-color: black;
  border-bottom-color: black;
  border-left-color: yellow;
  border-right-color: yellow;
}

Sẽ còn rất nhiều hình nữa mà thuộc tính border mang lại cho chúng ta, các bạn hãy thử sáng tạo ra nhiều hình khác và cùng chia sẻ với mọi người nhé.

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

Chuyên Mục: Css

Bài viết được đăng bởi webmaster