Trang chủ / Công nghệ / Lập trình / HTML & CSS
loading...
05-07-2010 08:31

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ả.

Cách vẽ hình tròn với CSS3 3
Chia sẻ:
Từ khóa:
CSS3 circle

Bài cùng chủ đề

loading...

Bình luận

Danh mục

Xem nhiều

Bài mới