Thứ Năm, 14 tháng 11, 2019

Thuộc tính css border

  Hoa Tran       Thứ Năm, 14 tháng 11, 2019
Thuộc tính viền CSS

Các border thuộc tính CSS cho phép bạn chỉ định kiểu dáng, chiều rộng và màu sắc của đường viền của một phần tử.


Kiểu viền CSS
Các border-stylequy định cụ thể sở hữu những loại biên giới để hiển thị.

Các giá trị sau được cho phép:

dotted - Xác định đường viền chấm
dashed - Xác định đường viền nét đứt
solid - Xác định đường viền chắc chắn
double - Xác định đường viền đôi
groove- Xác định đường viền có rãnh 3D. Hiệu ứng phụ thuộc vào giá trị màu viền
ridge- Xác định đường viền có viền 3D. Hiệu ứng phụ thuộc vào giá trị màu viền
inset- Xác định đường viền 3D. Hiệu ứng phụ thuộc vào giá trị màu viền
outset- Xác định đường viền đầu 3D. Hiệu ứng phụ thuộc vào giá trị màu viền
none - Xác định không có biên giới
hidden - Xác định đường viền ẩn
Các border-style bất động sản có thể có từ một đến bốn giá trị (đối với biên giới hàng đầu, biên phải, biên giới phía dưới, và biên giới trái).

Thí dụ
Trình diễn các kiểu viền khác nhau:

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 dashed solid double;}

Độ rộng đường viền CSS
Tài border-widthsản chỉ định chiều rộng của bốn biên giới.

Chiều rộng có thể được đặt thành một kích thước cụ thể (tính bằng px, pt, cm, em, v.v.) hoặc bằng cách sử dụng một trong ba giá trị được xác định trước: mỏng, trung bình hoặc dày.

Các border-widthbất động sản có thể có từ một đến bốn giá trị (đối với biên giới hàng đầu, biên phải, biên giới phía dưới, và biên giới trái).

CSS Border - Các mặt riêng lẻ
Từ các ví dụ trên bạn đã thấy rằng có thể chỉ định một đường viền khác nhau cho mỗi bên.

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):

Thí dụ
p {
  border-top-style: dotted;
  border-right-style: solid;
  border-bottom-style: dotted;
  border-left-style: solid;
}

Vì vậy, đây là cách nó hoạt động:

Nếu thuộc border-styletính có bốn giá trị:

kiểu viền: chấm đôi nét đứt;
đường viền trên cùng được chấm
đường viền bên phải là vững chắc
viền dưới là gấp đôi
đường viền bên trái bị đứt
Nếu thuộc border-styletính có ba giá trị:

kiểu viền: chấm đôi rắn chắc;
đường viền trên cùng được chấm
biên giới bên phải và bên trái là vững chắc
viền dưới là gấp đôi
Nếu thuộc border-styletính có hai giá trị:

kiểu viền: chấm rắn;
viền trên và dưới được chấm
biên giới bên phải và bên trái là vững chắc
Nếu border-styletài sản có một giá trị:

kiểu viền: chấm chấm;
tất cả bốn biên giới được chấm
Các border-styletài sản được sử dụng trong ví dụ trên. Tuy nhiên, nó cũng hoạt động với border-width và border-color.

CSS Border - Thuộc tính tốc ký
Như bạn có thể thấy từ các ví dụ trên, có nhiều thuộc tính cần xem xét khi xử lý đường viền.

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

Tài bordersản là một tài sản tốc ký cho các thuộc tính biên giới riêng lẻ sau đây:

border-width
border-style (cần thiết)
border-color
Thí dụ
p {
  border: 5px solid red;
}
logoblog

Thanks for reading Thuộc tính css border

Previous
« Prev Post

Không có nhận xét nào:

Đăng nhận xét