border-radio属性

最新推荐文章于 2024-05-06 22:37:13 发布

转载最新推荐文章于 2024-05-06 22:37:13 发布 · 2k 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/shenshenzhijia/p/7614136.html

本文介绍如何使用CSS3的border-radius属性制作不同类型的圆角边框、圆形及半圆形。通过设置border-radius的不同值，可以灵活地调整元素的形状。

boreder-radio属性是css3的新增属性，可以设置圆角的边框。

　　<head>

　　　　　　*{
　　　　　　　　margin: 0;
　　　　　　　　padding: 0;
　　　　　　}
　　　　　　.roundedCorner{
　　　　　　　　width:100px;/*宽*/
　　　　　　　　height: 100px;/*高*/
　　　　　　　　border-radius: 10px;/*圆角角度左上，右上，右下，左下都是10px*/
　　　　　　　　background: deepskyblue;/*背景颜色*/
　　　　　　　　margin: 20px auto;/*上下间距20px，左右居中*/
　　　　　　}
　　　　</style>
　　</head>
　　<body>
　　　　<div class="roundedCorner"></div>
　　</body>

　　效果图：

　　border-radius的优势不仅仅在制作圆角的边框，还是利用border-radius属性来画圆和半圆。

　　制作圆的方法：

　　<head>

　　　　<style type="text/css">
　　　　　　*{
　　　　　　　　margin: 0;
　　　　　　　　padding: 0;
　　　　　　}
　　　　　　.roundedCorner{
　　　　　　　　width: 100px;/*宽*/
　　　　　　　　height: 100px;/*高*/
　　　　　　　　border-radius: 50%;/*圆角角度设置50%，不要设置具体数值，如果哦下面的border值大的话会变形*/
　　　　　　　　background: deepskyblue;/*背景颜色*/
　　　　　　　　margin: 20px auto;/*上下间距20px，左右居中*/
　　　　　　　　border: 5px solid black;
　　　　　　}
　　　　</style>
　　</head>
　　<body>
　　　　<div class="roundedCorner"></div>
　　</body>

效果图

制作半圆的方法;

　　<head>

　　　　<style type="text/css">
　　　　　　*{
　　　　　　　　margin: 0;
　　　　　　　　padding: 0;
　　　　　　}
　　　　　　.roundedCorner{
　　　　　　　　width: 100px;/*宽*/
　　　　　　　　height: 50px;/*高*/
　　　　　　　　border-radius: 50px 50px 0 0;/*圆角角度*/
　　　　　　　　background: deepskyblue;/*背景颜色*/
　　　　　　　　margin: 20px auto;/*上下间距20px，左右居中*/

　　　　　　}
　　　　</style>
　　</head>
　　<body>
　　　　<div class="roundedCorner"></div>
　　</body>

效果图

转载于:https://www.cnblogs.com/shenshenzhijia/p/7614136.html