设计企业网站布局考虑的因素,生产公司简介模板,青岛网站建设公司大全,自适应网站源码一、html结构 圆弧的html结构是 两个块级元素嵌套。 View classNamewrapView classNameinner{/* 图标下的内容 */}/View/View二、css样式#xff1a;原理是两个半圆叠在一起#xff0c;就是一个半圆弧。那么#xff0c;如何画一…一、html结构 圆弧的html结构是 两个块级元素嵌套。 View classNamewrapView classNameinner{/* 图标下的内容 */}/View/View二、css样式原理是两个半圆叠在一起就是一个半圆弧。那么如何画一个半圆。 补充知识border-radius的写法 1、一个参数时代表四个角都是这个值。 2、两个参数时第一个参数代表左上、右下主对角线 第二个参数代 表右上、左下副对角线 3、三个参数时、第一个参数代表左上 第二个参数代表右上、左下第三个代表右下 3、四个参数时、第一个参数代表左上 第二个参数代表右上第三个代表右下第四个参数代表左下
.wrap {background: linear-gradient(to right, #55bfe9, #54aee5, #519ee1, #4e86db, #4d7ed8);width: 600px;height: 300px;display: flex;justify-content: center;// 为了让内嵌的圆的位置在外层圆的底部。营造一种拱形的感觉align-items: flex-end;// 这是画半圆的关键 左上右上的数值为高的一半 下面不动border-radius: 300px 300px 0 0;.inner {box-sizing: border-box;background: #fff;width: 460px;height: 230px;display: flex;justify-content: center;align-items: center;border-radius: 230px 230px 0 0;.graphContent {margin-top: 91px;}}}效果图~~~
