header-object

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="/css/border.css"rel="stylesheet"type="text/css"/>

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;
  }
  • .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;
  • border-radius: 40px;
    -moz-border-radius: 40px;
    -webkit-border-radius: 40px;
    
    --> 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="/css/border.css"rel="stylesheet"type="text/css"/> 
      </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ị

    tao va xoa border01

    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 border
    Viế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

    tao va xoa border02

    GV Hồ Đức Duy

Thêm ý kiến


Security code
Làm mới


2

Facebook

Thống kê truy cập

Hiện có 392 khách đang truy cập
2546518