Kiểu css viền

Trong các ví dụ từ bài viết trước, chúng tôi đã thấy rằng có thể chỉ định một đường viền khác nhau cho mỗi bên

Nội dung chính Show

CSS Border - Viết tắt
1. Biên giới là gì?
2. Thuộc tính của đường viền
kiểu viền
chiều rộng biên giới
màu viền
bán kính đường viền
3. biên giới tốc ký
4. Lời kết

Trong CSS, cũng có các thuộc tính để chỉ định từng đường viền (trên, phải, dưới và trái)

Ví dụ

View results

Ví dụ trên CSS được viết lại như sau

Ví dụ

View results

Từ những ví dụ trên, chúng ta có thể tóm tắt cách làm việc của kiểu viền thuộc tính như sau

Nếu thuộc tính

4 có bốn giá trị

kiểu viền. gạch ngang nét đứt đôi;
- Road on border is dotted
- Đường viền phải là đường viền vững chắc
- Đường viền dưới là gấp đôi
- Đường viền bên trái là gạch ngang

Nếu thuộc tính

4 có ba giá trị

kiểu viền. chấm rắn đôi;
- Road on border is dotted
- Đường viền bên trái và phải là solid
- Đường viền dưới là gấp đôi

Nếu thuộc tính

4 có hai giá trị

kiểu viền. chất rắn có chấm;
- Đường viền trên và dưới là dấu chấm
- Đường viền bên trái và phải là solid

If property

4 has an value

kiểu viền. say mê;
- Tất cả các đường viền đều được chấm

Ví dụ

View results

Thuộc tính

4 được sử dụng trong ví dụ trên. Cũng sẽ hoạt động tương tự với các thuộc tính của

2 và

CSS Border - Viết tắt

Để rút ngắn mã, chúng ta có thể chỉ định tất cả các thuộc tính đường viền riêng lẻ trong một thuộc tính duy nhất

Trong bài này mình sẽ hướng dẫn các bạn cách sử dụng thuộc tính border trong CSS, đây là thuộc tính giúp thiết lập đường viền cho các phần tử HTML. Trước hết hãy tìm hiểu khái niệm border là gì đã nhé

Bài viết này đã được đăng tại freetuts. net , không được sao chép dưới mọi hình thức.

1. Biên giới là gì?

Border thuộc tính CSS được sử dụng để tạo đường viền bao quanh nội dung của phần tử HTML, nó nằm giữa phần đệm và lề. Ở bài này các bạn khoan hãy quan tâm đến padding, margin là gì nha, mình sẽ có một bài khác nói về padding và margin

Xem ví dụ sau, các bạn sẽ có cái nhìn tổng quan về biên giới.

Bài viết này đã được đăng tại [free tuts. bọc lưới]

Như hình trên thì ta thấy cách hiển thị các đường viền rất linh hoạt, mình có thể thiết lập màu sắc (màu sắc) của đường viền, kích thước (chiều rộng) của đường viền, kiểu (kiểu) của đường viền. Và để thiết lập các display như thế nào thì chúng ta hãy cùng tìm hiểu qua phần 2 nhé

2. Thuộc tính của đường viền

Bài này mình sẽ trình bày 4 thuộc tính quan trọng của biên giới là. kiểu đường viền, độ rộng đường viền, màu đường viền và bán kính đường viền

kiểu viền

4 là thuộc tính để thiết lập loại đường viền nào sẽ được hiển thị

Những kiểu chính là đường viền hỗ trợ như sau

dotted - border will display is the dấu chấm
nét đứt - đường viền sẽ hiển thị nét đón
solid - viền sẽ hiển thị đường thẳng liên hệ
double - border will display 2 lines
rãnh - đường viền sẽ hiển thị định dạng ngành 3D
đường viền - đường viền sẽ hiển thị dưới dạng viền 3D
inset - đường viền sẽ hiển thị dạng viền trong 3D.
đầu - đường viền sẽ hiển thị ở dạng đầu 3D.
none - sẽ không có đường viền
hidden - border will be hidden

Cú pháp CSS

selector {
      border-style: giá trị;
}

Ví dụ RUN

p { width: 200px;}
p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted;}

And results of ví dụ trên

Lưu ý. Nếu các bạn không thiết lập giá trị cho thuộc tính

4, thì một số thuộc tính khác của biên giới như

p { width: 200px;}
p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted;}

p { width: 200px;}
p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted;}

2. will not be used

chiều rộng biên giới

p { width: 200px;}
p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted;}

1 là thuộc tính để thiết lập độ rộng của biên giới. Các bạn có thể sử dụng Đơn vị CSS như pt, px, em, rem. or is could use 3 value after. mỏng, trung bình, dày

Bài này các bạn đừng quan tâm CSS Unit là gì nhé, mình sẽ có một bài để nói riêng về phần này

Cú pháp CSS

Ví dụ RUN

Và đây là kết quả của ví dụ trên

Từ kết quả trên ta thấy

p { width: 200px;}
p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted;}

4 cũng đồng nghĩa sẽ không có viền. Và nếu bạn thiết lập

4 là không có hoặc ẩn thì

p { width: 200px;}
p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted;}

1 sẽ không có tác dụng

màu viền

p { width: 200px;}
p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted;}

2 là thuộc tính để thiết lập màu sắc cho đường viền

Color may be value as name, rgb, hex. Để tìm hiểu rõ hơn màu trong CSS như thế nào mời các bạn xem bài màu trong CSS, bài này mình sẽ không nhắc lại màu trong CSS nữa. )

Cú pháp CSS

Mình sẽ thêm thuộc tính

p { width: 200px;}
p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted;}

2 cho ví dụ ở trên. Các bạn nhấn vào nút RUN để xem kết quả nha

Ví dụ RUN

bán kính đường viền

p { width: 200px;}
p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted;}

9 is to setting bo tròn cho viền. Nghe hơi khó hiểu đúng không?

Ví dụ RUN

Như vậy là mình đã tìm hiểu xong 4 thuộc tính chính của border đó là. kiểu đường viền, độ rộng đường viền, màu đường viền, bán kính đường viền. Tuy nhiên, nếu cùng áp dụng 4 thuộc tính trên cùng một phần tử nào đó thì sẽ rất dài. Sẽ có cách viết khác ngắn gọn hơn và sẽ được trình bày ở phần 3 dưới đây

3. biên giới tốc ký

Tốc ký biên giới là cách viết rút gọn cho 3 thuộc tính

p { width: 200px;}
p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted;}

4 và

p { width: 200px;}
p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted;}

Cú pháp CSS

Tùy theo thứ tự (màu sắc kiểu chiều rộng) mình có thể thay đổi được nha. 2 thuộc tính width và color thì không bắt buộc, còn thuộc tính style sẽ bắt buộc nếu vì không thuộc tính style thì mấy thuộc tính khác cũng không áp dụng được

Các bạn cùng xem ví dụ sau

Ví dụ. CHẠY

And results on is

4. Lời kết

Như vậy là mình đã giới thiệu xong đường viền thuộc tính trong CSS rồi. Chúc các bạn vận dụng tốt

Cuối cùng trong quá trình viết không tránh khỏi thiếu sót, nếu có điều gì không hợp lý rất mong nhận được sự đóng góp ý kiến chân thành từ các bạn để bộ truyện của mình ngày càng tốt hơn

programming css

Kiểu css viền

CSS Border - Viết tắt

1. Biên giới là gì?

2. Thuộc tính của đường viền

kiểu viền

chiều rộng biên giới

màu viền

bán kính đường viền

3. biên giới tốc ký

4. Lời kết

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội