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
Y2JOriginal
2017-05-22 11:28:152225browse

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">

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
94b3e26ee717c64999d7867364b1b4a3
36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e

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!

Statement:
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