border-radius详解

2019独角兽企业重金招聘Python工程师标准>>>

1.border-radius可以同时设置1到4个值。简洁法
如果设置1个值，表示4个圆角都使用这个值。
border-radius:40px;

如果设置两个值，表示左上角和右下角使用第一个值，右上角和左下角使用第二个值。
border-radius: 10px 50px;

如果设置三个值，表示左上角使用第一个值，右上角和左下角使用第二个值，右下角使用第三个值。
border-radius: 10px 50px 40px;

如果设置四个值，则依次对应左上角、右上角、右下角、左下角（顺时针顺序）。
border-radius: 10px 20px 30px 40px;

2.单独设置一个角的写法
border-top-left-radius: 20px; //设置左上角
border-top-right-radius: 20px; //设置右上角
border-bottom-left-radius: 20px; //设置左下角
border-bottom-right-radius: 20px; //设置左下角

3.CSS画实心圆(宽度和高度保持一致，并且设置border-radius:50%)

代码:

.circle{
   width: 150px;/*宽高保持一致*/
   height: 150px;
line-height: 150px; /*当高度与行高保持一致时为垂直居中*/
   border-radius: 50%;
   background: orange;
   margin: 50px;
   text-align: center;
   color: #fff;
}

转载于:https://my.oschina.net/u/3887849/blog/1841517

border-radius详解相关推荐

CSS中的margin、border、padding区别 CSS padding margin border属性详解
图解CSS padding.margin.border属性 W3C组织建议把所有网页上的对像都放在一个盒(box)中,设计师可以通过创建定义来控制这个盒的属性,这些对像包括段落.列表.标题.图片以及层 ...
边框美学：HTML border属性详解
简介 border是HTML中用于设置元素边框的属性.通过设置border属性,可以为HTML元素添加边框线条,并且可以控制边框的宽度.样式和颜色等参数.常见的边框样式包括实线边框.虚线边框.点状边框 ...
border(元素边框详解）
border的属性: width:粗细程度,一般都以px为单位,color:颜色,与文字的color属性一样,style:样式,solid(实线).dashed(虚线).dotted(点划线).non ...
php js实现流程图,详解js中构造流程图的核心技术JsPlumb（2）_javascript技巧
前言:上篇详解js中构造流程图的核心技术JsPlumb介绍了下JsPlumb在浏览器里面画流程图的效果展示,以及简单的JsPlumb代码示例.这篇还是接着来看看各个效果的代码说明. 一.设置连线的样式 ...
03 html基础详解
02html基础详解文章目录 02html基础详解 1.HTML编辑器 2.标签 html常用标签 3.元素 4.属性常用属性 5.标题水平线注释 6.段落折行 7.格式化标签属性dir ...
【canvas 图形画布标签】(使用详解)
canvas 图形画布标签 1. 如何定义一个图形画布 ? 1.1 canvas 图形画布标签的属性有哪些 ? 1.2 canvas 图形画布的基本用法有哪些 ? 1.3 如何使用 canv ...
linux查看端口及端口详解
今天现场查看了TCP端口的占用情况,如下图红色部分是IP,现场那边问我是不是我的程序占用了tcp的链接,,我远程登陆现场查看了一下,这种类型的tcp链接占用了400多个,,后边查了一下资料,说EST ...
Element Plus 实例详解（四）___Border 边框
Element Plus 实例详解(四)___Border 边框本文目录: 一.前言二.搭建Element Plus试用环境 1.搭建Vue3项目(基于Vite + Vue) 2.安装Elemen ...
Flutter Container 参数详解
1 基本内容 1.1 继续关系 Object > Diagnosticable > DiagnosticableTree > Widget > StatelessWidget ...
Qt Quick 之 PathView 详解
分享一下我老师大神的人工智能教程!零基础,通俗易懂!http://blog.csdn.net/jiangjunshow 也欢迎大家转载本篇文章.分享知识,造福人民,实现我们中华民族伟大复兴! Path ...

border-radius详解

border-radius详解相关推荐

最新文章

热门文章