html中半圆怎么写,HTML5+CSS3从入门到精通之CSS3 制作半圆

本篇文章探讨了HTML5+CSS3从入门到精通之CSS3 制作半圆，希望阅读本篇文章以后大家有所收获，帮助大家对相关内容的理解更加深入。

<

1.利用css如何制作一个半圆？(思路：对样式border-radius以及宽高的控制)

复制代码

div{

display: inline-block;

border:1px solid #6baabb;

width:40px;

height:40px;

float:left;

margin:0px 10px;

}

a{

display: inline-block;

width:40px;

height:40px;

background: #6baabb;

}

.Round{/*圆*/

border-radius:20px;

}

.LeftRound{/*左半圆*/

width:20px;

border-radius:20px 0px 0px 20px;

}

.RightRound{/*右半圆*/

width:20px;

border-radius:0px 20px 20px 0px;

}

.TopRound{/*上半圆*/

height:20px;

border-radius:20px 20px 0px 0px;

}

.BottomRound{/*下半圆*/

height:20px;

border-radius:0px 0px 20px 20px;

}

复制代码

页面部分

效果：

2.即当a标签内有内容时，无法再对a标签进行宽高的控制，但又不想引入图片作为背景，此时用css3渐变属性linear-gradient

(思路：一个圆，将自己不需要显示的半圆用白色背景)

background:linear-gradient(to top, #fff 0%, #fff 45% ,#6baabb 50%,#6baabb); /*上半圆*/

background:linear-gradient(to bottom, #fff 0%, #fff 45% ,#6baabb 50%,#6baabb); /*下半圆*/

本文由职坐标整理发布，学习更多的相关知识，请关注职坐标IT知识库！