Cách vẽ hình tròn với CSS3

 
 
Cách vẽ hình tròn với CSS3

CSS3 cung cấp khả năng để tạo nhiều hiệu ứng đồ họa tuyệt vời. Bài viết sau sẽ hướng dẫn bạn một cách rất đơn giản để vẽ hình tròn.

  • 1

    Thuộc tính border-radius trong CSS3 cho phép tạo góc tròn, vì vậy nếu bạn tạo một hình vuông có kích thước là 100x100 và có border-radius là 100 thì hình vuông đó sẽ trở thành hình tròn.

  • 2

    Tạo file circle.html với nội dung sau:

    <html>
    	<head>
    		<style type="text/css">
    		.circle {
    			width: 100px;
    			height: 100px;
    			background: #C30;
    			text-align: center;
    			padding: 50px;
    			color: #fff;
    			-moz-border-radius: 100px;
    			-webkit-border-radius: 100px;
    			border-radius: 100px;
    		}
    		</style>
    	</head>
    	<body>
    		<div class="circle">Circle</div>
    	</body>
    </html>

    Thuộc tính border-radius với các tiền tố(prefix) khác nhau sẽ được dùng cho các trình duyệt khác nhau: Firefox (moz), Safari, Chrome (wekit), Konqueror (khtml). Riêng trình duyệt Opera dùng phiên bản không có tiền tố.

  • 3

    Chạy file circle.html để xem kết quả.

 
 
 

Bài cùng chủ đề

 
  • Cách tạo thông báo ấn tượng cho website bằng CSS
  • 45 website thiết kế đẹp mắt và sáng tạo dựa trên CSS
  • 60 bộ sưu tập icon chất lượng cao
  • 30 mẫu Javascript menu sáng tạo cho website
  • Cách tạo Gradient Button với CSS3
  • Cách tạo Slide Out Panel với CSS3
  • Cách hiển thị video dạng popup trên trang web với Video LightBox
  • Cách tạo Polaroid Photo Gallery với CSS3 và jQuery
  • Cách tạo menu Stay-On-Top với CSS3 và jQuery
  • Cách tạo góc tròn (rounded corner) với CSS3
 

Bạn nghĩ sao về bài viết này?

 
 
Bạn phải đăng nhập để thực hiện chức năng này.
Click Like để theo dõi các bài viết mới nhất trên Facebook và nhận quà tặng hấp dẫn!
Tặng ngay 1 chuột không dây Logitech M185 giá 308.000đ khi vnHow đạt 5000 lượt like trên Facebook.