CSS3 code tutorial to complete a square box rounded corner effect-CSS Tutorial-php.cn

CSS3 code tutorial to complete a square box rounded corner effect

Y2J

Release： 2017-05-22 11:28:15

Original

2132 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):

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!