Thứ Bảy, 28 tháng 12, 2013

CSS biên giới



CSS Thuộc tính biên giới

Các thuộc tính CSS biên giới cho phép bạn xác định phong cách và màu sắc của biên giới của một nguyên tố.

Kiểu biên giới

Tài sản cửa phong cách xác định loại biên giới để hiển thị.

GhiLưu ý: Không có biên giới bất động sản sẽ có bất kỳ tác dụng trừ khi biên giới theo phong cách bất động sản được thiết lập!

giá trị biên giới theo phong cách:

không có: Định nghĩa không biên giới
rải rác: Định nghĩa một biên giới chấm
tiêu tan: Định nghĩa một biên giới tiêu tan
rắn: Định nghĩa một biên giới vững chắc
đôi: Xác định hai biên giới. Chiều rộng của hai biên giới cũng giống như giá trị biên giới rộng
rãnh: Định nghĩa một biên giới 3D có rãnh. Hiệu quả phụ thuộc vào giá trị biên giới màu
sườn núi: Định nghĩa một biên giới chỏm 3D. Hiệu quả phụ thuộc vào giá trị biên giới màu
hình chữ nhật: Định nghĩa một biên giới hình chữ nhật 3D. Hiệu quả phụ thuộc vào giá trị biên giới màu
ngay từ đầu: Xác định đường biên giới đầu 3D. Hiệu quả phụ thuộc vào giá trị biên giới màu

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

Tài sản cửa rộng được sử dụng để thiết lập chiều rộng của biên giới.

Chiều rộng được thiết lập trong điểm ảnh, 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, hay dày.

Lưu ý: Các "cửa rộng" tài sản không hoạt động nếu nó được sử dụng một mình. Sử dụng "biên giới theo phong cách" bất động sản để thiết lập đường viền đầu tiên.

Ví dụ

<!DOCTYPE html>
<html>
<head>
<style>
p.one 
{
border-style:solid;
border-width:5px;
}
p.two 
{
border-style:solid;
border-width:medium;
}
p.three
{
border-style:solid;
border-width:1px;
}
</style>
</head>

<body>
<p class="one">Some text.</p>
<p class="two">Some text.</p>
<p class="three">Some text.</p>
<p><b>Note:</b> The "border-width" property does not work if it is used alone. Use the "border-style" property to set the borders first.</p>
</body>

</html>


Thử nó cho mình »

Màu viền

Tài sản cửa màu được sử dụng để thiết lập màu sắc của biên giới. Màu sắc có thể được thiết lập bởi:
  • tên - chỉ định một tên màu sắc, như "đỏ"
  • RGB - chỉ định một giá trị RGB, như "rgb (255,0,0)"
  • Hex - chỉ định một giá trị hex, như "# ff0000"
Bạn cũng có thể thiết lập màu sắc biên giới để "minh bạch".

Lưu ý: Các "cửa màu" tài sản không hoạt động nếu nó được sử dụng một mình. Sử dụng "biên giới theo phong cách" bất động sản để thiết lập đường viền đầu tiên.

Ví dụ

<!DOCTYPE html>
<html>
<head>
<style>
p.one
{
border-style:solid;
border-color:red;
}
p.two
{
border-style:solid;
border-color:#98bf21;
} 
</style>
</head>

<body>
<p class="one">A solid red border</p>
<p class="two">A solid green border</p>
<p><b>Note:</b> The "border-color" property does not work if it is used alone. Use the "border-style" property to set the borders first.</p>
</body>
</html>


Thử nó cho mình »

Bên cá nhân - biên giới

Trong CSS nó có thể xác định đường biên giới khác nhau cho bên khác nhau:

Ví dụ

<!DOCTYPE html>
<html>
<head>
<style>
p
{
border-top-style:dotted;
border-right-style:solid;
border-bottom-style:dotted;
border-left-style:solid;
}
</style>
</head>

<body>
<p>2 different border styles.</p>
</body>
</html>


Thử nó cho mình »

Ví dụ trên cũng có thể được thiết lập với một tài sản duy nhất:

Ví dụ

<!DOCTYPE html>
<html>
<head>
<style>
p
{
border-style:dotted solid;
}
</style>
</head>

<body>
<p>2 different border styles.</p>
</body>
</html>


Thử nó cho mình »

Tài sản biên giới theo phong cách có thể có từ một đến bốn giá trị.
  • biên giới theo phong cách: say mê đôi rắn tiêu tan;
    • biên giới hàng đầu rải rác
    • biên phải là rắn
    • biên giới phía dưới là đôi
    • biên giới còn lại là tiêu tan
  • biên giới theo phong cách: yêu thương vững chắc đôi;
    • biên giới hàng đầu rải rác
    • biên giới phải và bên trái là rắn
    • biên giới phía dưới là đôi
  • biên giới theo phong cách: yêu thương vững chắc;
    • biên giới trên và dưới được rải rác
    • biên giới phải và bên trái là rắn
  • biên giới theo phong cách: rải rác;
    • tất cả bốn đường biên giới được chấm
Tài sản cửa phong cách được sử dụng trong ví dụ trên. Tuy nhiên, nó cũng làm việc với cửa chiều rộng và biên giới màu.

Viết tắt tài sản - biên giới

Như bạn có thể nhìn thấy từ các ví dụ trên, có rất nhiều tài sản để xem xét khi giao dịch với biên giới.

Để rút ngắn mã, nó cũng có thể xác định tất cả các thuộc tính cá nhân trong một biên giới bất động sản. Này được gọi là một tài sản viết tắt.

Tài sản biên giới là một cách viết tắt cho các thuộc tính biên giới cá nhân sau đây:
  • cửa rộng
  • border-style (bắt buộc)
  • cửa màu

Ví dụ

<!DOCTYPE html>
<html>
<head>
<style>
p
{
border:5px solid red;
}
</style>
</head>

<body>
<p>This is some text in a paragraph.</p>
</body>
</html>


Thử nó cho mình »
Người đăng: vào lúc
Nhãn: ,
Các tin khác

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

Đăng nhận xét

Đăng ký: Đăng Nhận xét (Atom)