1、圆角正方形

.rounded-square{
  width: 200px;
  height: 200px;
  background-color: pink;
  border-radius: 50px;
}

当border-radius的值为一个时,它的最大有效值为“盒子最短边的二分之一”。

2、正圆

.circle{
  width: 200px;
  height: 200px;
  background-color: pink;
  border-radius: 100px;
}

3、圆角矩形

.rounded-rectangle{
  width: 200px;
  height: 100px;
  background-color: pink;
  border-radius: 50px;
}

4、不规则圆角

.not-regular-round{
    width: 200px;
    height: 200px;
    background-color: pink;
    border-top-left-radius: 100px;
    border-top-right-radius: 50px;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 25px;
}

简写

.not-regular-round{
  width: 200px;
  height: 200px;
  background-color: pink;
  border-radius: 100px 50px 10px 25px;
}

5、半圆

.half-circle{
  width: 200px;
  height: 100px;
  background-color: pink;
  border-radius: 200px 200px 0 0;
}

6、四分之一圆

.quarter-circle{
  width: 200px;
  height: 200px;
  background-color: pink;
  border-radius: 200px 0 0 0;
}

7、不是圆角矩形,也不是矩形,也不是椭圆

.strange-rectangle{
  width: 200px;
  height: 100px;
  background-color: pink;
  border-radius: 70px / 30px;
}

8、椭圆

.ellipse{
  width: 200px;
  height: 100px;
  background-color: pink;
  border-radius: 100px / 50px;
}

9、一半椭圆

.half-ellipse{
  width: 200px;
  height: 100px;
  background-color: pink;
  border-radius: 200px 0 0 200px / 50px 0 0 50px;
}

10、四分之一椭圆

.quarter-ellipse{
  width: 200px;
  height: 100px;
  background-color: pink;
  border-radius: 200px 0 0 0 / 100px 0 0 0;
}

11、一只站着的鸡蛋

.stand-egg{
  width: 100px;
  height: 200px;
  background-color: pink;
  border-radius: 50px 50px 50px 50px / 150px 150px 50px 50px;
}

12、一片叶子

.a-leaf{
  width: 200px;
  height: 200px;
  background-color: pink;
  border-radius: 200px 0 200px 0;
}

13、一片站着的歪叶子

.a-stand-strange-leaf{
  width: 100px;
  height: 200px;
  background-color: pink;
  border-radius: 200px 0 200px 0;
}

14、一片躺着的歪叶子

.a-sleep-strange-leaf{
  width: 200px;
  height: 100px;
  background-color: pink;
  border-radius: 200px 0 200px 0;
}

15、爱因为在心中

<div class="love-shape-box">
  <div class="left-love-shape"></div>
  <div class="right-love-shape"></div>
</div>
.love-shape-box{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 400px;
}
.left-love-shape{
  width: 100px;
  height: 170px;
  background-color: red;
  border-radius: 50px 50px 0px 0;
  transform-origin: 50px 50px;
  transform: rotate(-45deg);
}
.right-love-shape{
  width: 100px;
  height: 170px;
  background-color: red;
  border-radius: 50px 50px 0px 0;
  transform-origin: 50px 50px;
  transform: rotate(45deg);
}

16、环带

把上面的形状的背景换成边框border: 50px solid pink;即可得到圆环。。。

你了解border-radius吗?的更多相关文章

  1. 重温CSS:Border属性

    边界是众所周知的,有什么新的东西吗?好吧,我敢打赌,在这篇文章中,有很多你不看永远不知道的东西! 不仅可以用CSS3来创建圆角,使用原有CSS一样可以显示自定义图形.这是正确的(有待考究):在过去,没 ...

  2. jquery/zepto 圣诞节雪花飞扬

    下载地址: http://www.html5tricks.com/jquery-html5-christ-snow.html 演示地址: http://www.html5tricks.com/jque ...

  3. 为 Web 设计师准备的 20 款 CSS3 工具

    1.CSS3 Generator 2. Border Radius 3. CSS3 Maker 4. CSS3 Transforms 5. CSS3 Drop shadow generator 6. ...

  4. jQuery实践——属性和css篇

    属性: attr html:<div>demo1</div> jQuery:$("div").attr("id","demo1 ...

  5. Designing for iOS: Graphics & Performance

    http://robots.thoughtbot.com/designing-for-ios-graphics-performance  [原文] In the previous article, w ...

  6. Quartz2D复习(一)--- 基础知识 / 绘制线段圆弧 / 图片水印 / 截图

    1.Quartz 2D是一个二维绘图引擎,同时支持ios和Mac系统: Quart2D的API是纯C语言的,API来自于Core  Graphics框架: 2.Quartz 2D可以绘制图形(线段/三 ...

  7. [css]需警惕CSS3属性的书写顺序

    转载张鑫旭:http://www.zhangxinxu.com/wordpress/2010/09/%E9%9C%80%E8%AD%A6%E6%83%95css3%E5%B1%9E%E6%80%A7% ...

  8. 为什么要使用sass

    或许你已经听过一个叫作Sass的东东?可能你已经了解它,并且你能像大师一样写出一些函数? 对于不清楚我在讲什么的读者或者客户,你们可以想想web开发过程,你们的期望和站点用户的体验想要怎样的.无论如何 ...

  9. CSS模版收集

    Css Reset by Eric MeyerURL:http://www.ahrefmagazine.com/web-design/30-useful-css-snippets-for-develo ...

  10. iOS图形处理和性能(转)

    在之前的文章里,我们探讨了基于多种不同技术来实现自定义的UIButton,当然不同的技术所涉及到的代码复杂度和难度也不一样.但是我也有意提到了基于不同方法的实现所体现出的性能表现也不一一相同.   [ ...

随机推荐

  1. linux 自定义yum仓库、repo文件 yum命令

    目录 自定义yum仓库:createrepo 自定义repo文件 使用yum命令安装httpd软件包 卸载httpd软件包:yum –y remove 软件名 清除yum缓存:yum clean al ...

  2. vuex的安装

    可以启动vue ui 手动添加vuex. 或使用 cnpm install vuex 2.使用,import vuex from “vuex” vue.use(vuex) 3.安装插件, 首先键入谷歌 ...

  3. 【文件上传】文件上传的form表单提交方式和ajax异步上传方式对比

    一.html 表单代码 …… <input type="file" class="file_one" name="offenderExcelFi ...

  4. Oracle环境变量与中文显示的问题

    在CentOS(linux)下安装Oracle,对环境变量的设置有一些讲究. 一般我们可以把环境变量设置在/etc/profile文件中: # Oracle SettingsTMP=/tmp; exp ...

  5. CodeForces 724G: Xor-matic Number of the Graph

    题目传送门:CF724G. 题意简述: 一张 \(n\) 个点的无向图,边有边权. 定义三元组 \((u,v,w)(1\le u < v\le n)\) 合法当且仅当存在从点 \(u\) 到点 ...

  6. C#之WinForm基础 新建一个不可编辑的comboBox

    慈心积善融学习,技术愿为有情学.善心速造多好事,前人栽树后乘凉.我今于此写经验,愿见文者得启发. 1.拉控件 2.添加可选数据 3.改变基本样式 4.效果图 C#优秀,值得学习.Winform,WPF ...

  7. Monkeyrunner的相关总结

    1.1  monkeyrunner API 主要包括三个模块1.MonkeyRunner:这个类提供了用于连接monkeyrunner和设备或模拟器的方法,它还提供了用于创建用户界面显示提供了方法.2 ...

  8. 【Android开发】之Fragment开发1

    一直知道Fragment很强大,但是一直都没有去学习,现在有些空闲的时间,所以就去学习了一下Fragment的简单入门.我也会把自己的学习过程写下来,如果有什么不足的地方希望大牛指正,共同进步! 一. ...

  9. Python基础:内置类型(未完待续)

    本文根据Python 3.6.5的官文Built-in Types而写. 目录 1.真值测试 2.布尔操作 -- and, or, not 3.比较 4.数字型 -- int, float, comp ...

  10. IP地址、域名、域名解析系统相关

    IP地址(Internet Protocol Address) 它来自TCP/IP协议,存在于其中的IP层,用于实现不同计算机之间的通信,类似于门牌号. 设计之处,IP地址是准备给地球上每一台计算机一 ...