CSS3 border-radius妙用

AnyBisks 2019-06-27 

border-radius：左上 右上 右下 左下（就是顺时针）
如果没有4个值的情况下，缺的那个角的值与对角相等（如2、3、4）

1、border-radius: 2em;( border-radius: 2em 2em 2em 2em;)
等价于：
border-top-left-radius: 2em;
border-top-right-radius: 2em;
border-bottom-right-radius: 2em;
border-bottom-left-radius: 2em;

2、border-radius: 2em 10em;
等价于：
border-top-left-radius: 2em;
border-top-right-radius: 10em;
border-bottom-right-radius: 2em;
border-bottom-left-radius: 10em;

3、border-radius: 2em 10em 5em;
等价于：
border-top-left-radius: 2em;
border-top-right-radius: 10em;
border-bottom-right-radius: 5em;
border-bottom-left-radius: 10em;

4、border-radius: 2em 1em 4em / 0.5em 3em;
等价于：
border-top-left-radius: 2em 0.5em;
border-top-right-radius: 1em 3em;
border-bottom-right-radius: 4em 0.5em;
border-bottom-left-radius: 1em 3em;

重点来了，最后一种用法
如图：

CSS3 border-radius妙用
例子2：
border-radius: 2em 1em 4em / 0.5em 3em;
补齐4个角就是 border-radius: 2em 1em 4em 1em/ 0.5em 3em 0.5em 3em;
每一个角有2面，比如说左上角，有个top面和一个left面。
分解出来就是：
border-top-left-radius: 2em 0.5em;
border-top-right-radius: 1em 3em;
border-bottom-right-radius: 4em 0.5em;
border-bottom-left-radius: 1em 3em;
以左上角为例子：
CSS3 border-radius妙用

小例子：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title></title> 
<style> 
div
{
    border:2px solid #a1a1a1;
    padding:10px 40px; 
    background:#dddddd;
    width:300px;
    border-radius: 2em 1em 4em / 0.5em 3em;
}
</style>
</head>
<body>

<div>border-radius 属性允许您为元素添加圆角边框！ </div>

</body>
</html>

效果：

CSS3 border-radius妙用

总结：可以用css画一些复杂的效果图，下面链接大神画的小猪佩奇，css真是无所不能。
链接描述

AnyBisks

AnyBisks

相关推荐

jQuery实现日历效果

jquery是用的是2.0版本。--基于W3C标准 不用做任何修改-->. --设置初始化文档信息和文档管理标注-->. --整个页面编码 utf-8 国际编码 通用性最强，GBK/gb2312 中文-->. .signincalenda

momode / 0评论 2020-09-11

你知道我们平时在CSS中写的%都是相对于谁吗？

在我们编写css的时候，经常会用到百分比赋值（%）实现自适应。像我们最常使用的流式布局设计模式，基本所有的column的宽度都是通过%来取值的。或者比如经常会遇到的元素水平垂直居中问题，我们常常会使用下面这样的css代码加以实现：。line-height：

云端漂移 / 0评论 2020-07-06

巧妙实现带圆角的渐变边框

border-image是 CSS 规范CSS Backgrounds and Borders Module Level 3 新增的一个属性值。顾名思义，我们可以给 border 元素添加 image，类似于background-image，可以是图片也可

MaureenChen / 0评论 2020-02-17

滚动条样式

::-webkit-scrollbar{width:6px;height:16px;} ::-webkit-scrollbar-track-piece{background-color: #f3f3f3;-webkit-border-radi

bertzhang / 0评论 2020-01-31

CSS3(1)---圆角边框、边框阴影

CSS3可以简单理解成是CSS的增强版，它的优点在于不仅有利于开发与维护，还能提高网站的性能。圆角在实际开放过程中，还是蛮常见的。以前基本是通过背景图片做的，有了CSS3后可以使用简单的属性搞定，可以通过border-radius设置元素的圆角半径。bor

impress / 0评论 2020-01-11

css——设置圆角border-radius值为50%安卓各版本会变形

刚开始审查元素时发现border超出，以为是这个问题。后来参考文章后发现是单位问题。.cirlce.active { 　　border: 1px solid #fd6001; 　　background: #fd6001;}

MaureenChen / 0评论 2020-01-10

0025 CSS属性书写顺序

文本属性：color / font / text-decoration / text-align / vertical-align / white- space / break-word

impress / 0评论 2019-12-31

css画百分比圆环

border-radius: 44px 0 0 44px/44px 0 0 44px;border-radius: 50px 0 0 50px/50px 0 0 50px;当剩余量大于50%时左侧上叠加环形旋转角度不用变，只有计算右测上叠加环形旋转角度即可

zhanghao / 0评论 2019-12-20

CSS3圆角

表中的数字指定完全支持该属性的第一个浏览器版本。数字后面的 -webkit- 或者 -moz- 使用时需要指定前缀。在CSS3中，可以使用border-radius属性，为元素指定圆角显示。如果只为border-radius属性指定一个值，则此半径将应用于

zengni / 0评论 2019-12-18

CSS3(1)---圆角边框、边框阴影

CSS3可以简单理解成是CSS的增强版，它的优点在于不仅有利于开发与维护，还能提高网站的性能。圆角在实际开放过程中，还是蛮常见的。以前基本是通过背景图片做的，有了CSS3后可以使用简单的属性搞定，可以通过border-radius设置元素的圆角半径。bor

zhanghao / 0评论 2019-12-12

记录移动端开发1像素边框问题， stylus代码转成less

改成less 语法，对照less官方文档，写入 mixin.less文件，引用除了语法的不同，变量定义、方法的调用外，改了一处。问题解决，下班走人！

didianmanong / 0评论 2019-11-17

纯css实现开关效果

我们使用<input type="checkbox">标签来实现这个效果。checkbox的选中、未选中的特性，刚好对应开关的打开、关闭on:打开 off:关闭。这里要讲解一下，使用了position来实现的定位。有不了解的

impress / 0评论 2019-11-05

CSS3 边框

通过 CSS3，您能够创建圆角边框，向矩形添加阴影，使用图片来绘制边框 - 并且不需使用设计软件，比如 PhotoShop。您将学到以下边框属性：border-radius、box-shadow、border-image。IE9+、Firefox 4+、C

MaureenChen / 0评论 2019-11-03

DIV 自定义滚动条样式（二）

流浏览器自带的滚动条样式很丑，确实有必要美化。滚动条从外观来看是由两部分组成：1，可以滑动的部分，我们叫它滑块2，滚动条的轨道，即滑块的轨道，一般来说滑块的颜色比轨道的颜色深。而且不同的浏览器下，CSS 滚动条属性的写法也不一样，如果各个浏览器都需要兼容，

echoes / 0评论 2019-11-03

前端面试每日 3+1 —— 第199天

[css] border-radius:50%和border-radius:100%有什么区别？[js] ajax的请求状态有哪几种？[软技能] 假设有一个场景，需要前端自己计算十万级别或更多的数据，你有解决什么方案呢？《论语》，曾子曰：“吾日三省吾身”。

zhangruiweb / 0评论 2019-11-01

在安卓手机中rem单位border-radius:50%画圆变形的解决方案

};使用border-radius:50%,或者border-radius的值与宽高相等，都可实现一个完美的圆形，但是在不同的安卓手机中，会有不同程度的变形；当使用px做为宽高的单位，border-radius:50%画出来的圆是不会变形的；但使用rem时

绿豆饼 / 0评论 2019-10-20

-webkit-scrollbar 滚动条样式美化

-webkit-scrollbar修改滚动条样式,包括背景颜色，大小，形状等等。

xtuhcy / 0评论 2014-11-12

通过父元素 加css 类

a.detail_link { background-color: #7ccef3; padding: 5px 15px; color: #fff; -webkit-border-radius: 4px; -moz-border-radius: 4px;

Phoebe的学习天地 / 0评论 2015-11-12

你可能不知道的一些css小知识

css是一门功能强大、具备完整生态的复杂语言。它拥有很多的技巧， 但是生活工作中我们可能不怎么会接触到，这包括一些实际上挺实用的技巧。在此，特地列举一些css里比较容被忽略的小知识，希望能对你有所帮助。跟圆形的实现一样，这里也是用到border-radiu

王景迁 / 0评论 2019-09-07

CSS 使用图片作为4个角边框

父及元素定位方式position: relative;四个角的图片定位为position: absolute;-webkit-border-image:url 30 30 round; /* Safari 5 */

懵懂听风雨 / 0评论 2018-09-27

CSS语言预处理----SASS一分钟快速入门

@charset "utf-8";$text-color:#000;text-overflow:ellipsis;-o-text-overflow:ellipsis;-ms-text-overflow:ellipsis;overflow

yezi / 0评论 2019-07-01

在安卓手机中rem单位border-radius:50%画圆变形的解决方案

}画了个圆，在ios中效果很理想。但是在安卓手机中会有变形的情况存在，渲染方面确实安卓手机干不过ios。当使用px做单位，border-radius 50%出来的圆是不会变形的，可能是安卓在rem计算过程中产生误差或者有什么其他因素造成的渲染问题。网上有很

xzw / 0评论 2019-06-30

纯CSS设置Checkout样式

.tgl-ios+.tgl-btn:after{border-radius:2em;background:#fbfbfb;-webkit-transition:left .3s cubic-bezier,padding .3s ease,margin .3

zhanghaibing00 / 0评论 2017-10-17

学习Stylus

关于stylusstylus是css的预处理框架，是以.styl为后缀的文件，可以创建健壮的，动态的富有表现的css。它用来为css增加一些编程的特性，比如在css中可以使用变量，函数等编程语言的特性，从而是css更加的简洁，适应性更强，代码也更加的直观易

nicepainkiller / 0评论 2019-06-28

CSS实现各种形状示例

<!DOCTYPE html>. display:inline-block;height: 120px;width: 120px;background-color: chocolate;-moz-border-radius: 60px;-web

無為 / 0评论 2017-07-06

css绘制各种各样的形状图形

我们在编写前端代码时，经常会遇到各种各样的形状图形，除了用背景图片和插入img图片的方法，我们还可以用css边框、圆角、渐变和定位的方法结合使用，绘制各种各样的形状图形。

coulder / 0评论 2019-06-28

前端每日实战：104# 视频演示如何用纯 CSS 创作一个货车 loader

效果预览按下右侧的“点击预览”按钮可以在当前页面预览，点击链接可以全屏预览。可交互视频此视频是可以交互的，你可以随时暂停视频，编辑视频中的代码。请用 chrome, safari, edge 打开观看。

jianqi / 0评论 2019-06-28

利用CSS模拟太阳系运转

justify-content:center;/*用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式。align-items:center;/*属性在弹性容器内的各项没有占用交叉轴上所有可用的空间时对齐容器内的各项（垂直）。display:flex;

xvzhengyang / 0评论 2016-07-19

移动前端开发经验小结

}不过，在 Android Browser2.* 上，这个定义将会失效，而显示为默认的矩形。}如果你觉得这样定义不够灵活，想懒一点，那么其实可以给 border-radius 预设一个比较大的值，比如 100rem，用以避免当元素的尺寸变了，圆角半径也得跟

WEB前端娃steiny / 0评论 2019-06-28

前端每日实战：96# 视频演示如何用纯 CSS 和 D3 创作一艘遨游太空的宇宙飞船

效果预览按下右侧的“点击预览”按钮可以在当前页面预览，点击链接可以全屏预览。可交互视频此视频是可以交互的，你可以随时暂停视频，编辑视频中的代码。请用 chrome, safari, edge 打开观看。border-radius: 80% 0 50% 45

沉着前进 / 0评论 2019-06-28

CSS3中圆角(border-radius)的实现

实现边框圆角border-radius: 32px;behavior: url;11 lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet

zyhui / 0评论 2016-02-14

less.js简介

LESS CSS可以在多种语言、环境中使用，包括浏览器端、桌面客户端、服务端。所以在做全局样式调整的时候我们可能只需要修改几行代码就可以了。LESS中的函数一一映射了JavaScript代码，如果你愿意的话可以操作属性值。下载地址http://winles

魄竹 / 0评论 2016-01-17

通过父元素 加css 类

a.detail_link { background-color: #7ccef3; padding: 5px 15px; color: #fff; -webkit-border-radius: 4px; -moz-border-radius: 4px;

walliam / 0评论 2015-11-12

前端每日实战：61# 视频演示如何用纯 CSS 创作一只咖啡壶

效果预览按下右侧的“点击预览”按钮可以在当前页面预览，点击链接可以全屏预览。可交互视频此视频是可以交互的，你可以随时暂停视频，编辑视频中的代码。请用 chrome, safari, edge 打开观看。}接下来润色一下。

lanzhusiyu / 0评论 2019-06-27

前端每日实战：58# 视频演示如何用纯 CSS 创作一只卡通鹦鹉

效果预览按下右侧的“点击预览”按钮可以在当前页面预览，点击链接可以全屏预览。可交互视频此视频是可以交互的，你可以随时暂停视频，编辑视频中的代码。请用 chrome, safari, edge 打开观看。

Alisa0 / 0评论 2019-06-27

IE兼容CSS3圆角border-radius的方法（同时兼容box-shadow，text-shadow）

border-radius: 15px; /* Opera 10.5+, 以及使用了IE-CSS3的IE浏览器 */. -webkit-box-shadow: 10px 10px 20px #000; /* Safari 和 Chrome */. beha

王为仁 / 0评论 2015-06-09

常用的CSS3介紹

以前要做round corner真的有點費力，而且你還得用各個browser去test下有沒問題，費時失事。有了border-radius就不用再煩了。雖然舊版browser也不可能顯示round corner了，可是正因為你知道，所以也就省了看的時間了！

walliam / 0评论 2015-04-28

CSS3 圆角边框

border:2px solid;border-radius:25px;

yyNet0 / 0评论 2015-02-03

css3新属性-圆角效果

border-radius是向元素添加圆角边框。border-radius的值能用px单位，还可以用百分比或者em，但兼容性目前还不太好。

福叔 / 0评论 2014-12-24

前端每日实战：5# 视频演示如何用 CSS 创作一个立体滑动 toggle 交互控件

效果预览按下右侧的“点击预览”按钮在当前页面预览，点击链接全屏预览。可交互视频教程此视频是可以交互的，你可以随时暂停视频，编辑视频中的代码。请用 chrome, safari, edge 打开观看。源代码下载请从 github 下载。

Phoebe的学习天地 / 0评论 2019-06-27

css3简记，了解一下？

如果你要在四个角上一一指定，可以使用以下规则：

云端漂移 / 0评论 2019-06-27

如何让IE7,IE8支持border-radius

用过border-radius的人都应该知道，这个属性的兼容性，如果你不知道，也没关系，看看下面的图就知道了。实现兼容性非常简单，在meta里加下面这段代码就支持了。<meta http-equiv="X-UA-Compatible&quo

galilajiao00 / 0评论 2014-12-08

css3 实现圆角

border-radius:5px 4px 2px 1px;//四个半径值分别是左上角、右上角，右下角和左下角，是顺时针

淡风wisdon大大 / 0评论 2014-11-27

初步认识 LESS

LESS 是一个流行的样式表语言，它提供了 CSS3 也未曾实现的多种功能，让您编写 CSS 更加方便，更加直观。LESS 已经被广泛使用在多种框架中 。本文将介绍 LESS 产生的背景、优势、演化与 CSS 之间的转化，及其典型的应用场景，并将其与其他样

wghou / 0评论 2014-11-20

-webkit-scrollbar 滚动条样式美化

-webkit-scrollbar修改滚动条样式,包括背景颜色，大小，形状等等。

梦远青城 / 0评论 2014-11-12

CSS3新特性----- 实现圆角

从web2.0开始，开始流行使用圆角，如果你不使用圆角，你的网站可能不会被列入web2.0网站。主要问题是，你至少需要4个图片和一些JS或复杂的层来实现圆角。这些将成为过去了！那么，有什么新东西？实际上CSS3的声明是border-radius。到目前为止

梦远青城 / 0评论 2014-11-11

CSS小知识

-webkit-border-radius:10px;border-radius:10px;

qianxiaona / 0评论 2014-08-17

border-radius 圆角边框

在css3.0中，又添加了一个新的属性border-radius，使用border-radius这个属性可以实现圆角边框的效果。除IE和遨游外，目前有Firefox ，Safari，Chrome，Opera支持该属性，其Safari，Chrome，Oper

無為 / 0评论 2014-05-09

CSS3 圆角属性 border-radius和-webkit-border-radius使用

在 CSS3 中新增了一个 border-radius 边框半径属性，即大家常用的圆角效果。这使得制作圆角将不再麻烦，只需对所用对象加一个 border-radius 属性即可，不必使用图片定位或冗余代码完成了。不过它的使用瓶颈目前也是显而易见的，因为效果

icecoffeemzp / 0评论 2014-04-17