美文网首页
边框圆角

边框圆角

作者: 琪33 | 来源:发表于2018-04-25 08:48 被阅读0次
<style>
        .box{
            width: 300px;
            height: 300px;
            border: 1px solid #000;
            background-color: pink;
            margin:100px auto;

            /*border-radius: 60px;*/

            /*单个属性 : 水平半径 垂直半径*/
            /*border-top-left-radius: 60px 120px;*/
            /*border-top-right-radius: 60px 120px;*/
            /*border-bottom-left-radius: 60px 120px;*/
            /*border-bottom-right-radius: 60px 120px;*/

            /* 复合写法
                border-raduis:水平半径/垂直半径
            */

            /*border-radius: 60px 60px 60px 60px/ 120px 120px 120px 120px ;*/

            /*简化*/

            /*border-radius: 60px/120px;*/

            /**/

            /*border-radius: 60px/60px;*/

            /* 四个角的说半径都相同是简写*/
            /*border-radius: 60px;*/

            /* 赋值顺序 从左上开始,顺时针赋值,如果当前角没有值,取对角的值  */
            /*border-radius: 20px 60px 100px 140px;*/

            /*border-radius: 20px 60px;*/

            border-radius: 20px 60px 100px;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>

相关文章

  • CSS边框圆角--跟着李南江学编程

    1.什么是边框圆角? 就是把矩形边框变成圆角边框,就叫做边框圆角。 2.设置边框圆角的格式 2.1 border-...

  • 25.边框圆角渐变

    边框 什么是边框圆角?将直角的边框变为圆角的边框 边框圆角的格式?border-radius: 左上 右上 右下 ...

  • Flutter-Border

    边框(Border) 单侧边框 全部边框 圆角(borderRadius) 全部圆角 单侧圆角 阴影(BoxSha...

  • Image

    直接圆角图片 设置圆角图片度数 设置圆角图片带灰色圆角边框 设置圆角图片带灰色圆角边框带阴影

  • 常用CSS3 一目了然

    1.css3边框 圆角边框 border-radius: 5px;(圆角半径) 边框阴影 box-shadow: ...

  • android中实现view的圆角

    一、实心圆角 二、空心圆角、有边框

  • UIView任意角圆角和圆角边框

    圆角原理:设置view.layer.mask该遮罩层。 圆角边框:在view.layer 上增加一层,绘制圆角边框...

  • CSS3边框,背景,渐变,过渡,2d变换

    01-边框圆角.html 02-圆角应用.html 03-边框阴影.html 04-边框图片.html 01-背景...

  • 盒模型

    内容区 内边距 边框 指定边框圆角 边框风格 外边距

  • 边框相关样式

    border-radius(边框圆角) 该属性用于设置边框圆角,属性值为圆角半径,当设置一个时为值为四个角的圆角半...

网友评论

      本文标题:边框圆角

      本文链接:https://www.haomeiwen.com/subject/vzkelftx.html