从零开始前端学习[15]:css样式之border-radius圆角使用

来源：互联网发布：linux c rpc通信编辑：程序博客网时间：2024/06/06 00:08

css样式之border-radius圆角使用

border-top-left-radius 左上角的圆角
border-top-right-radius 右上角的圆角显示
border-bottom-left-radius 左下角的圆角显示
border-bottom-right-radius 右下角的圆角显示
border-radius圆角复合类型的css样式

提示：
博主：章飞_906285288
博客地址:http://blog.csdn.net/qq_29924041

* border-top-left-radius 左上角的圆角*

border-top-left-radius顾名思义，也就是说明的是左上角的圆角设置

使用如下：
border-top-left-radius:30px;
border-top-left-radius:50%;

border-top-right-radius 右上角的圆角显示

border-top-right-radius顾名思义，也就是说明的是右上角的圆角设置

使用如下：
border-top-right-radius:50px;
border-top-right-radius:30%;

border-bottom-left-radius 左下角的圆角显示

border-bottom-left-radius顾名思义，也就是说明的是左下角的圆角设置

使用如下：
border-bottom-left-radius:30px;
border-bottom-left-radius:40%;

border-bottom-right-radius 右下角的圆角显示

border-bottom-right-radius顾名思义，也就是说明的是右下角的圆角设置

使用如下：
border-bottom-right-radius:40px;
border-bottom-right-radius:20%;

因为其单独设置并不是特别好设置，所以在此直接写在一起:

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>Title</title>  <meta charset="UTF-8"><!--申明当前网页的编码集UTF-8-->  <meta name="Generator" content="EditPlus®">   <!--编辑器的名称-->  <meta name="Author" content="作者是谁">         <meta name="Keywords" content="关键词">  <meta name="Description" content="描述和简介">  <style type="text/css">                                                body,dl,dd,dt,p,h1,h2,h3,h4,h5,h6{ margin: 0;}        ul,ol{margin: 0; list-style: none; padding: 0;}        a{ text-decoration: none; }        *{ margin: 0; padding: 0; }      .p1{width: 200px;height: 200px;border: 1px solid red;background: deeppink;border-top-left-radius: 50px;      border-top-right-radius: 50px;      border-bottom-left-radius: 50px;      border-bottom-right-radius: 50px}        .p2{width: 300px;height: 300px;border: 1px solid red;background: deeppink;border-top-left-radius: 50%;          border-top-right-radius: 50%;          border-bottom-left-radius: 50%;          border-bottom-right-radius: 50%}  </style></head><body>  <p class="p1"></p>  <p class="p2"></p></body></html>

显示效果如下所示：

这里写图片描述
可以画一个椭圆边，也可以画一个圆，这个看具体的需求

border-radius圆角复合类型的css样式

border-radius也就是上述几种radius属性的复合样式的集合；

但是要注意的是其值个数的对应属性：

四个值的时候:

    border-radius:border-top-left-radius  border-top-right-radius border-bottom-left-radius border-bottom-right-radius;    //对应的值为左上，右上，右下，左下(顺时针方向)    //如:border-radius：5px 10px 15px 20px;

三个值的时候：

    border-radius:左上 (右上左下) 右下; //沿对角线来区分的    如:border-radius：5px 10px 15px ;

两个值的时候

    border-radius:(左上右下) (右上左下) //沿着对角线来分布的    如:border-radius:10px 20px;

一个值的时候

    border-radius:5px; //表示所有的值都是一样的;

如果值都是为50%的话，那么这个时候就直接是一个圆型

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>Title</title>  <meta charset="UTF-8"><!--申明当前网页的编码集UTF-8-->  <meta name="Generator" content="EditPlus®">   <!--编辑器的名称-->  <meta name="Author" content="作者是谁">         <meta name="Keywords" content="关键词">  <meta name="Description" content="描述和简介">  <style type="text/css">                                                body,dl,dd,dt,p,h1,h2,h3,h4,h5,h6{ margin: 0;}        ul,ol{margin: 0; list-style: none; padding: 0;}        a{ text-decoration: none; }        *{ margin: 0; padding: 0; }    p{width: 200px;height: 200px;background: deeppink;display: inline-block}    .main {width: 1200px;margin: 30px auto;border: 1px solid green}    .p1{background: blue;border-radius: 10px 20px 30px 40px;}    .p2{background: magenta;border-radius: 10px 20px 40px}    .p3{background: gold;border-radius: 10px 40px;}    .p4{background: darkgoldenrod;border-radius: 10px}    .p5{background: darkkhaki;border-radius: 50%}  </style></head><body>  <div class="main">    <p class="p1"></p>    <p class="p2"></p>    <p class="p3"></p>    <p class="p4"></p>    <p class="p5"></p>  </div></body></html>

显示的效果如下所示：

这里写图片描述

可以看到border-radius主要是沿着对角线来进行区分使用的；

欢迎持续访问博客

阅读全文

0 0