Cách tạo và xóa border radius
1. Vấn đề
Trong quá trình định dạng văn bản bằng hình ảnh có rất nhiều trường hợp bạn gặp là phải tạo góc “corner” trong file hình ảnh. Rất may mắn với công nghệ css3 thật đơn giản không còn là vấn đề cực khổ cho mấy anh em lập trình như xưa nữa. Bằng công nghệ mới này bạn sẽ format (định dạng) văn bản trên web một cách nhanh chóng và hỗ trợ được nhiều trình duyệt. Bạn hãy an tâm nhé. Từ khóa quan trọng để thực hiện là thuộc tính border-radius.
2. Tạo border-radius cho hình ảnh
Thiết kế một file border.css nằm trong folder css cùng cấp và thực hiện đoạn mã lệnh sau để includes vào sites bằng mã lệnh sau
<linkhref="http://redirect.viglink.com?key=11fe087258b6fc0532a5ccfc924805c0&u=%2Fcss%2Fborder.css%22rel%3D%22stylesheet%22type%3D%22text%2Fcss"/>
Viết một class để định dạng border-radius
.divRadius
{
background-image: url(../images/2.jpg);
width: 144px;
height: 270px;
border: 8pxsolid#666;
border-radius: 40px;
-moz-border-radius: 40px;
-webkit-border-radius: 40px;
}
border-radius: 40px;
-moz-border-radius: 40px;
-webkit-border-radius: 40px;
.divRadius là tên class dùng đề gọi trong tag html
background-image: url(../images/2.jpg); dùng hình ảnh làm background
set chiều cao và chiều rộng lần lượt cho div là
width: 144px;
height: 270px;
--> Dùng để hỗ trợ cho nhiều trình duyệt như: firefox, chrome, sarafi với radius là 40px
Coding đầy đủ cho site
<htmlxmlns="http://www.w3.org/1999/xhtml">
<headrunat="server">
<title></title>
<linkhref="http://redirect.viglink.com?key=11fe087258b6fc0532a5ccfc924805c0&u=%2Fcss%2Fborder.css%22rel%3D%22stylesheet%22type%3D%22text%2Fcss"/>
</head>
<body>
<formid="form1"runat="server">
<divclass="divRadius">
</div>
</form>
</body>
</html>
<divclass="divRadius"></div> dùng để gọi class vào tag div
Kết quả hiển thị
3. Xóa các border trên trang
Để xóa các border trên page cho tất cả image bạn dùng thuộc tính borderViết một class tên là noborder dùng để set cho thẻ div
.noBorder
{
background-image: url(../images/1.jpg);
width: 144px;
height: 270px;
border:0px;
}
Gọi vào tag div như sau
<divclass="noBorder"></div>
Kết quả ta nhận được như sau
GV Hồ Đức Duy
Nếu là khách, bạn phải đăng ký tài khoản và kích hoạt tài khoản để bình luận được hiển thị ở đây.Thông tin kích hoạt gửi đến mail của bạn.
Cách tạo và xóa border radius
Người đăng: VNTAOBAO.COM on Thứ Tư, 20 tháng 3, 2013
{ 0 nhận xét... read them below or add one }
Đăng nhận xét