Rumah > Artikel > hujung hadapan web > CSS3完成一个方框圆角效果的代码教程
CSS3完成一个方框圆角效果的代码教程
- Y2Jasal
- 2017-05-22 11:28:152197semak imbas
本实例是CSS3实现p圆角。实现圆角的CSS3代码句是： "border-radius: 20px;" 。需使用支持CSS3的浏览器运行,例如新版的Chrome、火狐，或者IE9。IE6、7、8不支持
代码如下:
<!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">本实例是CSS3实现p圆角。实现圆角的CSS3代码句是： "border-radius: 20px;" 。需使用支持CSS3的浏览器运行,例如新版的Chrome、火狐，或者IE9。IE6、7、8不支持。
脚本之家CSS3教程
94b3e26ee717c64999d7867364b1b4a3
36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e
效果图(Chrome)：
实际效果（请使用支持CSS3的浏览器）：
本实例是CSS3实现p圆角。实现圆角的CSS3代码句是： "border-radius: 20px;" 。需使用支持CSS3的浏览器运行,例如新版的Chrome、火狐，或者IE9。IE6、7、8不支持。
【相关推荐】
1. CSS3免费视频教程
Atas ialah kandungan terperinci CSS3完成一个方框圆角效果的代码教程. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：教你怎么去规范的书写CSS样式Artikel seterusnya：教你用CSS绘制标准的圆形图案