Home > Web Front-end > CSS Tutorial > CSS3 code tutorial to complete a square box rounded corner effect

CSS3 code tutorial to complete a square box rounded corner effect

Y2J
Release: 2017-05-22 11:28:15
Original
2227 people have browsed it

This example is CSS3 implementing p rounded corners. The CSS3 code sentence to implement rounded corners is: "border-radius: 20px;" . It needs to be run using a browser that supports CSS3, such as the new version of Chrome, Firefox, or IE9. IE6, 7, and 8 do not support

The code is as follows:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>CSS3实现p圆角 - CSS3教程 - 计划 - 博客园</title> 
<meta name="
key
words" content="www.jb51.net"/> 
<style type="text/css">
 #yuanjiao{ 
font-family: Arial; 
border: 2px solid #379082; 
border-radius: 20px; 
padding: 30px 30px; 
width: 330px; }
</style> 
</head> 
<body> 
<p id="yuanjiao">
Copy after login

This example is CSS3 to implement p rounded corners. The CSS3 code sentence to implement rounded corners is: "border-radius: 20px;" . It needs to be run using a browser that supports CSS3, such as the new version of Chrome, Firefox, or IE9. IE6, 7, and 8 are not supported.
Script House CSS3 Tutorial




Rendering (Chrome):

Actual effect (please use a browser that supports CSS3):

This example is CSS3 implementing p rounded corners. The CSS3 code sentence to implement rounded corners is: "border-radius: 20px;" . It needs to be run using a browser that supports CSS3, such as the new version of Chrome, Firefox, or IE9. IE6, 7, and 8 are not supported.

【Related recommendations】

1. CSS3 free video tutorial

2. Teach you how to write CSS styles in a standardized way

3. Tutorial on the use of H5 and CSS3 form validation

4. Detailed code explanation of the gradually glowing border through CSS3 pseudo-elements

5. Detailed explanation of the process of CSS3 completing the lowpoly animation effect of images

The above is the detailed content of CSS3 code tutorial to complete a square box rounded corner effect. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template