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. mysql修改表操作

    一: 修改表信息 1.修改表名 alter table test_a rename to sys_app; 2.修改表注释 alter table sys_application comment '系 ...

  2. WeX5入门之欢乐捕鱼打包

    一.下载欢乐捕鱼的素材包 https://files.cnblogs.com/files/wordblog/%E7%B4%A0%E6%9D%90.zip 二.把欢乐捕鱼素材放入项目中 并启动tomca ...

  3. 六、springcloud之配置中心Config

    一.配置中心提供的核心功能 Spring Cloud Config为服务端和客户端提供了分布式系统的外部化配置支持.配置服务器为各应用的所有环境提供了一个中心化的外部配置.它实现了对服务端和客户端对S ...

  4. 利用vw+rem实现移动web适配布局

    基本概念 1.单位 Px(CSS pixels) 像素 (px) 是一种绝对单位(absolute units), 因为无论其他相关的设置怎么变化,像素指定的值是不会变化的 其实是相对于某个设备而言的 ...

  5. 深入理解HashMap(及hash函数的真正巧妙之处)

    原文地址:http://www.iteye.com/topic/539465 Hashmap是一种非常常用的.应用广泛的数据类型,最近研究到相关的内容,就正好复习一下.网上关于hashmap的文章很多 ...

  6. Linux入门(二)Shell基本命令

    上一篇讲了普通用户切换到root用户,今天补充一点,对于Debian和Ubuntu用户,安装时候只有一个普通用户注册,在需要root权限时,我们可以在普通用户模式下输入sudo这个命令运行某些相关特权 ...

  7. 网络协议之TCP

    前言 近年来,随着信息技术的不断发展,各行各业也掀起了信息化浪潮,为了留住用户和吸引用户,各个企业力求为用户提供更好的信息服务,这也导致WEB性能优化成为了一个热点.据分析,网站速度越快,用户的黏性. ...

  8. SQL SERVER中查询某个表或某个索引是否存在

    查询某个表是否存在: 在实际应用中可能需要删除某个表,在删除之前最好先判断一下此表是否存在,以防止返回错误信息.在SQL SERVER中可通过以下语句实现: IF OBJECT_ID(N'表名称', ...

  9. 记录一次webpackJsonp is not defined

    始末: 领导让将最近部署的一部分更改隐藏掉,so,我先不存当前分支内容,创建新分支,在新分支里回滚到上一版本,进行更改操作,一切都么问题,本地vue项目与python项目都运行不报错,但在部署后,报错 ...

  10. Pyhton核心编程-Chap2习题-DIY

    在学Python,在看<Python核心编程>的pdf,做了Chap2的题目,答案为DIY # Filename: 2-11.py # Author: ChrisZZ mylist = [ ...