css3学习之--伪类与圆角

随着css3.0的发布到逐渐完善，目前已经大部分浏览器已经能较好地适配，所以写一些css3的学习经历，分享心得，主要以案例讲解为主，话不多说，今天以css3的新增的“圆角”属性来讲解，基于web画一个“安卓机器人”。

一.理解border-radius属性

border-radius-top-left         /*左上角*/
border-radius-top-right       /*右上角*/
border-radius-bottom-right /*右下角*/
border-radius-bottom-left   /*左下角*/
//提示：按顺时针方式

下面用几个实例来展示border-radius的具体用法。

<style>
        .container{
            width: 600px;
            height: 600px;
            margin: 50px auto;
        }
        .res{
            width: 100px;
            height: 100px;
            background: #FF0000;
            border-radius: 10px;/*设置四个角的弧度为10px*/
            float: left;
            margin-left: 30px;
        }
        .half-circle{
            width: 100px;
            height: 50px;/*如果是半圆的话，这里高度应该是宽度的一半*/
            background: #FF0000;
            border-radius: 50px 50px 0 0;/*设置上方两个的弧度为50px，即为height的高度，以下四个参数，顺时针方向分别为左上角，右上角，右下角，左下角*/
            float: left;
            margin-left: 30px;
        }
        .circle{
            width: 100px;
            height: 100px;
            background: #FF0000;
            border-radius: 50px;/*设置四个角的弧度为50px，即为height的高度*/
            float: left;
            margin-left: 30px;
        }
 </style>

<body>
        <div class="container">
            <div class="res"></div>
            <div class="half-circle"></div>
            <div class="circle"></div>
        </div>
</body>

效果如下：

我想，通过代码都能大概了解border-radius的基础用法了吧。

那么接下来就来画一个安卓机器人吧。

来源：https://www.cnblogs.com/yuanzhenpeng/p/11585032.html

标签

border-radius

android

css